Question

您好我在移动设备上设置设备宽度时遇到问题。问题是，当我在iPhone上从纵向移动到横向时，我的页面缩放到屏幕宽度的一半，其余的是黑色。当我处于纵向模式时，我看到页面就好了。所以所有的信息：

 page-width:640px;
 viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.5, maximum-scale=2.0">

我还尝试在方向更改上设置新视口但没有效果。我这样累：

 <script type="text/javascript">
(function(doc) {
var vpwidth = 320;
var vlwidth = 640;
function doOnOrientationChange()
{
switch(window.orientation) 
{  
 case 0: //portrait
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.5, maximum-scale=2.0;')
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=1, maximum-scale=2.0;')
      break;
    default:
      //set the viewport attributes to whatever you want!
        viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.25, maximum-scale=2.0, minimum-scale=1.0;')
      break;
}
}

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
 doOnOrientationChange();

}(document));
 </script>

为景观设置正确的视口

0 个答案: