如何设置适合处理旋转的iPhone的视口元？

Question

所以我一直在使用:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

让我的HTML内容在iPhone上很好地显示.它非常有效,直到用户将设备旋转到横向模式,其中显示器仍然限制在320px.

是否有一种简单的方法来指定一个视口,该视口会根据用户更改设备方向而发生变化？或者我必须使用Javascript来处理它？

Answer 1

只是想自己解决这个问题,我想出的解决方案是:

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

这似乎将设备锁定为1.0比例,无论其方向如何.作为副作用,它确实完全禁用用户缩放(缩放缩放等).

Answer 2

对于仍然感兴趣的人:

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

从页面:

<meta name="viewport" content="user-scalable=no,width=device-width" />

这指示Safari阻止用户使用"捏合"手势放大页面,并将视口的宽度固定到屏幕的宽度,这是iPhone所处的方向.

Answer 3

如果可以提供帮助,您不希望丢失用户缩放选项.我喜欢这个JS的解决方案,从这里.

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>