Question

我有一个问题，我已经看到了被问到的不同部分，但我还没有找到一个简洁的工作答案，可以在iOS＆amp; android（我现在专门用iPad，iPad2，Android手机和iPod Touch进行测试）。所以我拥有的是一个可扩展的网站。我希望能够指定网站的最小宽度为480px，最大宽度为1014px，中间的任何内容都保持不变。这是我目前的代码：

viewportWidth由window.screen.width计算 minwidth是一个变量（480） maxwidth是一个变量（1014）

在正在触发的设备旋转事件上调用以下代码。

注意：我在下面的源代码中留下了一些注释代码，以显示我尝试过的内容

任何帮助都非常感谢，我的代码确实有效，但我发现在较小的设备上我必须缩小一个微笑，因为页面在视口之外（即使它不应该）。旋转几次有时会修复这个......

/*Set initial Sizes*/
        if( viewportWidth > maxWidth){
            //dont adjust since it may be desktop
            viewportWidth = maxWidth;
            $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width'  );


            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'width=' +  maxWidth + '; initial-scale=1.0; user-scalable=1;');

        }else if( viewportWidth > minWidth && viewportWidth < maxWidth ){
            $('body').removeClass('mobile');
            $('body').addClass('desktop');
            $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' );

            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;');

            isMobile = 0;

        }else if( viewportWidth <= minWidth ){  

            if( /iPhone|iPad|iPod/i.test(navigator.userAgent)  ) {
                $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width / minWidth ).toFixed(2)  ); 
            }else{
                $('meta[name="viewport"]').attr('content', 'initial-scale = '  + (window.screen.width / minWidth ).toFixed(2)  + '; width=device-width');
            }

            //viewport = document.querySelector("meta[name=viewport]");
            //viewport.setAttribute('content', 'initial-scale = '  + (window.screen.width / minWidth ).toFixed(2)  + '; width=' + minWidth  + '; initial-scale=1.0; user-scalable=1;');

            $('body').removeClass('desktop');
            $('body').addClass('mobile');

            //$('#pageBody').width(minWidth );
            viewportWidth = minWidth ;

            isMobile = 1;   

        }

Answer 1

没有人回答，所以这是有用的东西

1，对css使用媒体查询 2，使用此脚本修复缩放

<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

<script type="text/javascript">
$(function(){
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
  var mw = 480; // min width of site
  var ratio =  ww / mw; //calculate ratio
  if( ww < mw){ //smaller than minimum size
   $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww);
  }else{ //regular size
   $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
  }
}
});
</script>

设置适当的视口，与ios和amp; android，适用于旋转

1 个答案: