0

网站地址：straightace.com

使用了以下代码：

    <meta name="viewport" content="initial-scale=1,
                    user-scalable=yes,maximum-scale=0.6,width=device-width"> 
    <meta name="viewport" content="height=device-height,width=device-width">

目的是在任何垂直或水平方向的 iPad 上加载 1085 像素宽的页面，我们为任何 699 像素宽以下的设备提供了一个单独的脚本，该脚本重定向到移动站点，目前并不担心 Android 平板电脑。以任一方向加载页面时，甚至在水平加载并转向垂直时，一切都很顺利。

问题是当以垂直方向加载页面并将其变为水平方向时，页面向左推，屏幕右侧出现一个大黑条。刷新后，该栏消失。

任何人都可以在保留视口功能的同时帮助删除黑条吗？

4

2 回答 2

0

此代码可能会有所帮助：

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=.5">

也就是说，maximum-scale从您的代码中删除该属性。

于 2013-04-04T19:19:43.260 回答
0

这是一个简单的解决方案：

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

虽然简单，但此解决方案有效地禁用了捏合缩放。有多种 Javascript 解决方案可以修复此旋转视口问题，同时仍允许用户缩放。 这个对我有用。

<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>
于 2013-08-13T15:01:38.823 回答