Question

@viewport在Safari Mobile（ipad 2）中不起作用

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

UserAgent：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;
}

Answer 1

您必须通过<meta>或<javascript>

以某种方式触发您的视口

[EDITED]

original source

使用JavaScript进行iPhone和iPad定位

上面显示的元标记非常有效，但是，您也可以使用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就绪网页的HEAD中，然后将显示设置为相应的方向设置。

@viewport在Safari Mobile中不起作用（ipad 2）

1 个答案: