5

我有一个问题，我已经看到了被问到的不同部分，但我还没有找到一个在 iOS 和 android 上正常工作的简明工作答案（我现在正在专门测试 iPad、iPad2、Android 手机和 iPod Touch） . 所以我所拥有的是一个可扩展的网站，效果很好。我希望能够指定站点的最小宽度为 480 像素，最大宽度为 1014 像素，中间的任何内容都将保持原样。这是我当前的代码：

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;   

        }
4

1 回答 1

10

没有人回答，所以这是可行的

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>
于 2013-01-05T20:42:01.670 回答