我有一个宽度恰好为 1000 像素、高度为 850 像素的 HTML 元素（它实际上是一个在画布标记上包含 HTML5 游戏的 iFrame，但我希望这并不重要）。
我希望元素呈现在平板电脑上，以便视口缩放以始终显示整个元素，仅此而已。因此，当平板电脑处于横向模式时，您会期望两侧都有空白；在纵向模式下，下面（和上面？）会有空白。
在 iPad2 上进行测试时，纵向模式似乎可以立即使用，视口会自动将元素置于顶部并缩放以准确显示整个图像；但在横向模式下，它会做同样的事情并切断底部。
我尝试过各种组合viewport元标记，例如<meta name="viewport" content="height=850"/>，但似乎无法让它持续工作。
使用 jQuery 根据窗口大小的变化调整大小的解决方案将受到欢迎。
更好的解决方案是根据设备的屏幕宽度动态修改视口元标记。
例如，如果您的网站针对 1000 像素宽进行了优化（那么您希望将初始比例动态设置为将整个网站置于视图中所需的精确缩放值。
-
将没有“内容”属性的视口元放在您的头脑中。
<head>
<meta id='viewport' name="viewport"/>
</head>
-
在文档正文中添加 javascript 片段
//our desired page width
var desiredPageWidth = 1000;
//detect the device screen width
var screenWidth = 0;
if(window.innerWidth > 0)
{
screenWidth = window.innerWidth;
}
else if(screen.width > 0)
{
screenWidth = screen.width;
}
//if your screen width is less than the desired page width
//then calculat the initial zoom
if(screenWidth < desiredPageWidth)
{
//initial zoom is the screenWidth / desiredPageWidth
var viewportContent = "width="+desiredPageWidth+", maximum-scale=1, initial-scale="+screenWidth/desiredPageWidth;
//dynamically set the viewport content
document.getElementById('viewport').setAttribute('content', viewportContent);
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
