设置视口后iPad上的黑条

网址：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">

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

问题是，当以垂直方向加载页面并将其转到水平方向时，页面会向左推，屏幕右侧会出现一个大的黑色条。刷新后，酒吧消失

---

是否有人可以在保留视口功能的同时删除黑条？

此代码可能会有所帮助：

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

---

也就是说，从代码中删除

最大刻度
属性。
以下是一个简单的解决方案：

<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>


（功能（doc）{
var addEvent='addEventListener'，
类型='gesturestart'，
qsa='querySelectorAll'，
比例=[1,1]，
文档中的meta=qsa？doc[qsa]（'meta[name=viewport]'）：[]；
函数fix（）{
meta.content='width=设备宽度，最小刻度='+scales[0]+'，最大刻度='+scales[1]；
文档removeEventListener（类型、修复、true）；
}
if（（meta=meta[meta.length-1]）&&addEvent在文档中）{
fix（）；
量表=[.25,1.6]；
doc[addEvent]（类型、修复、真）；
}
}（文件）；