logo标签列表

如何在屏幕方向改变后调整视口宽度以适应屏幕？

javascriptandroidiosmobiletablet
19

我需要在横屏时将页面的视口宽度设置为950px，在竖屏时设置为630px。这些像素宽度非常死板。

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

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

初始页面加载后（无论是竖屏还是横屏），一切看起来都很好。

然而，在方向更改后，移动Safari保留先前的比例设置，而不是适应屏幕的视口。双击或连续两次点击可解决此问题。但我需要此过程自动进行。

我已经附上了源代码，上传到演示网址。

以下是方向更改后拍摄的屏幕截图：从横屏到竖屏，从竖屏到横屏。

如何强制Safari自动将视口宽度设置为屏幕宽度？或者我的做法是否有误？

更改视口中的各种比例设置没有帮助。将maximum-scale=1.0或initial-scale=1.0设置为覆盖我的width，将width设置为device-width（即在我的iPad 2上为1024或768），留下死边距。设置minimum-scale=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>
4个回答
10

我曾遇到这个问题，编写了一些JavaScript来解决它。我将其放在Github上：

https://github.com/incompl/ios-reorient

以下是代码供您参考：

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现在忽略这些属性。 - igneosaur
8

好的，答案就在*-scale属性中。

您可以通过将maximum-scale和minimum-scale设置为相同的值来强制使用特定的比例尺。但是，您必须通过将meta标签设置为<meta name='viewport' content='user-scalable=no' />来牺牲用户缩放功能。

请注意，*-scale设置是相对于设备屏幕尺寸而言的，这些尺寸因设备而异。幸运的是，您可以在JS中的screen对象中查找这些尺寸。

因此，如果您的内容宽度小于980，则您的强制比例应为screen_dimension / content_width。

以上JS的更新版本使方向更改能够平稳进行。 在iPhone 4和iPad 2上测试通过。

    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);
    }
我也可以确认以上内容在iPad上有很好的效果（2013年5月）。 - Rick
显然会影响其他设备的宽度，所以并不是一个好的解决方案。但终于有东西可以使用了 :-) - Maya Kathrine Andersen
3
使用本帖的智慧，只需获取脚本容器的宽度和高度（窗口宽度和高度）即可... https://dev59.com/tHA75IYBdhLWcg3wSm-4#9049670 在Android和iOS上使用此视口：target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no解决了我的问题。请注意，target-densitydpi将在除Android之外的所有其他设备上标记，但不会造成任何损害。它将确保没有自动缩放。
1

我曾遇到iOS类似的问题，在进行一些测试后，找到了解决方案，您可以在这里找到。

在视口宽度更改后重置iOS缩放

我的解决方案中禁用了缩放，但您可以自由地删除"user-scalable=no"以使其可缩放。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接