设置视口后iPad上的黑条答案

【问题标题】：Black bar on iPad after setting viewport设置视口后iPad上的黑条
【发布时间】：2013-02-15 19:56:58
【问题描述】：

网站地址：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 平板电脑。以任一方向加载页面时，甚至在水平加载并转向垂直时，一切都很顺利。

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

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

【问题讨论】：

标签： ipad xhtml meta joomla3.0

【解决方案1】：

此代码可能会有所帮助：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：