0

@viewport 在 Safari Mobile (ipad 2) 中不起作用

我不能用<meta name="viewport" ... />，我只能用css。

用户代理：Mozilla/5.0 (ipad,...AppleWebKit/534.46...Safari/7534.48.3)

@-webkit-viewport {
 width: 480px;
 zoom: 2.0;
 user-zoom: zoom;
}
@-moz-viewport {
 width: 480px;
 zoom: 2.0;
 user-zoom: zoom;
}
@-ms-viewport {
 width: 480px;
 zoom: 2.0;
 user-zoom: zoom;
}
@-o-viewport {
 width: 480px;
 zoom: 2.0;
 user-zoom: zoom;
}
@viewport {
  width: 480px;
  zoom: 2.0;
  user-zoom: zoom;
}
4

1 回答 1

0

你必须以某种方式触发你的视口，通过<meta>或<javascript>

[编辑]

原始来源

为 iPhone 和 iPad 使用 JavaScript

上面显示的元标记工作得很好，但是，您也可以使用 JavaScript 来做同样的事情，因为 iPad 和 iPhone 都支持脚本语言。以下 JavaScript 函数通过使用 window 对象的 innerWidth 属性并定期设置 body 元素的 orient 属性（在本例中每 4 秒）检测并设置设备的视口方向：

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>

您可以将上面的代码片段放在您的 iPhone/iPad-ready 网页的 HEAD 中，它会将显示设置为适当的方向设置。

于 2013-04-08T14:51:33.707 回答