Fatal编程技术网
  • javascript/
  • Javascript 在方向更改时更改视口宽度后，如何适应屏幕？

Javascript 在方向更改时更改视口宽度后，如何适应屏幕？

javascript android ios mobile

Javascript 在方向更改时更改视口宽度后，如何适应屏幕？,javascript,android,ios,mobile,tablet,Javascript,Android,Ios,Mobile,Tablet,我需要一个页面的视口宽度为950px的横向和630px的纵向。不幸的是，这些像素宽度不灵活 我正在使用CSS媒体查询根据方向调整DOM内容的宽度 我正在收听JS中的方向更改事件，以便在方向更改时调整视口的大小 在初始页面加载（纵向或横向）时，一切看起来都很好 但是，在方向更改后，Mobile Safari将保留以前的比例设置，而不是将视口与屏幕匹配。一两次轻敲就能把它弄直。但我需要它是自动的 我已经附上了下面的源代码，并将其上传到了一个演示 下面是方向改变后的屏幕截图：从横向到纵向，从纵向到横向

我需要一个页面的视口宽度为950px的横向和630px的纵向。不幸的是，这些像素宽度不灵活

我正在使用CSS媒体查询根据方向调整DOM内容的宽度

我正在收听JS中的方向更改事件，以便在方向更改时调整视口的大小

在初始页面加载（纵向或横向）时，一切看起来都很好

但是，在方向更改后，Mobile Safari将保留以前的比例设置，而不是将视口与屏幕匹配。一两次轻敲就能把它弄直。但我需要它是自动的

我已经附上了下面的源代码，并将其上传到了一个演示

下面是方向改变后的屏幕截图：从横向到纵向，从纵向到横向

如何强制Safari将视口宽度自动设置为屏幕宽度？还是我完全错了

更改视口中的各种比例设置没有帮助。设置
最大刻度=1.0
或
初始刻度=1.0
会覆盖我的
宽度
，将
宽度
设置为
设备宽度
（即我的iPad 2上的1024或768），留下空白空白。设置
最小刻度=1.0
似乎不起任何作用

<!DOCTYPE html>
<html>
    <head>
      <title>iPad orientation</title>

      <meta name="viewport" content="user-scalable=yes">

      <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

      <script type="text/javascript" charset="utf-8">;
        /**
        * update viewport width on orientation change
        */
        function adapt_to_orientation() {
          // determine new screen_width
          var screen_width;
          if (window.orientation == 0 || window.orientation == 180) {
            // portrait
            screen_width = 630;
          } else if (window.orientation == 90 || window.orientation == -90) {
            // landscape
            screen_width = 950;
          }

          // resize meta viewport
          $('meta[name=viewport]').attr('content', 'width='+screen_width);
        }

        $(document).ready(function() {

          // bind to handler
          $('body').bind('orientationchange', adapt_to_orientation);

          // call now
          adapt_to_orientation();
        });

      </script>
      <style type="text/css" media="screen">
        body {
          margin: 0;
        }
        #block {
          background-color: #333;
          color: #fff;
          font-size: 128px;

          /* landscape */
          width: 950px;
        }
        #block .right {
          float: right
        }
        @media only screen and (orientation:portrait) {
          #block {
            width: 630px;
          }
        }
      </style>
    </head>
    <body>
      <div id="block">
        <div class="right">&rarr;</div>
        <div class="left">&larr;</div>
      </div>
    </body>
</html>



iPad定位
;
/**
*更改方向时更新视口宽度
*/
函数使_适应_方向（）{
//确定新的屏幕宽度
屏幕宽度；
如果（window.orientation==0 | | window.orientation==180）{
//肖像画
屏幕宽度=630；
}else if（window.orientation==90 | | window.orientation==-90）{
//景观
屏幕宽度=950；
}
//调整元视口的大小
$（'meta[name=viewport]'）。attr（'content'，'width='+屏幕宽度）；
}
$（文档）.ready（函数（）{
//绑定到处理程序
$（'body'）.bind（'orientationchange'，adapt_to_orientation）；
//现在打电话
使_适应_方向（）；
});
身体{
保证金：0；
}
#挡块{
背景色：#333；
颜色：#fff；
字号：128px；
/*景观*/
宽度：950px；
}
#街区，对{
浮球：对
}
@仅媒体屏幕和（方向：纵向）{
#挡块{
宽度：630px；
}
}
&rarr；
&larr；
好的，答案归根结底在于
*-scale
属性

您可以通过将
最大比例
和
最小比例
设置为相同的值来强制特定比例。但是您必须通过将meta标记设置为
来牺牲用户的伸缩性

请注意，
*-scale
设置与设备的屏幕尺寸有关，不同设备的屏幕尺寸不同。幸运的是，您可以在JS中的
屏幕
对象中查找这些

因此，如果内容宽度小于980，则强制缩放应为
screen\u dimension/content\u width

我上面的JS的这个更新版本使方向的改变顺利进行。在iPhone4和iPad2上测试


    function adapt_to_orientation() {
      var content_width, screen_dimension;

      if (window.orientation == 0 || window.orientation == 180) {
        // portrait
        content_width = 630;
        screen_dimension = screen.width * 0.98; // fudge factor was necessary in my case
      } else if (window.orientation == 90 || window.orientation == -90) {
        // landscape
        content_width = 950;
        screen_dimension = screen.height;
      }

      var viewport_scale = screen_dimension / content_width;

      // resize viewport
      $('meta[name=viewport]').attr('content',
        'width=' + content_width + ',' +
        'minimum-scale=' + viewport_scale + ', maximum-scale=' + viewport_scale);
    }



利用这篇文章的智慧，简单地获得脚本容器的宽度和高度（窗口宽度和高度）。。。



使用此视口：
target densitydpi=device dpi，width=device width，initial scale=1，user scalable=no
解决了我在android和ios上的问题。请注意，目标densitydpi将标记在除Android以外的所有其他设备上，但不会造成任何伤害。它将确保不会自动缩放任何内容。
我遇到了这个问题，并编写了一些JavaScript来修复它。我把它放在Github上：



以下是为方便您而编写的代码：


window.document.addEventListener('orientationchange', function() {
  var iOS = navigator.userAgent.match(/(iPad|iPhone|iPod)/g);
  var viewportmeta = document.querySelector('meta[name="viewport"]');
  if (iOS && viewportmeta) {
    if (viewportmeta.content.match(/width=device-width/)) {
      viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=1');
    }
    viewportmeta.content = viewportmeta.content.replace(/width=[^,]+/, 'width=' + window.innerWidth);
  }
  // If you want to hide the address bar on orientation change, uncomment the next line
  // window.scrollTo(0, 0);
}, false);



iOS也有类似的问题，经过一些测试，您可以在这里找到解决方案




在我的解决方案中，缩放功能被禁用，但您可以自由删除“user scalable=no”以使其可缩放。
我也可以确认上述功能在ipad（2013年5月）上具有出色的效果。显然，许多其他设备上的宽度都会变宽。所以这不是一个好的解决方案。但最终还是有一些东西需要处理：——）