在方向更改后更改視口寬度后如何適應屏幕？

Question

我需要頁面的視口寬度為橫向950px和縱向630px。 遺憾的是，這些像素寬度不靈活。

我正在使用CSS媒體查詢根據方向調整DOM內容的寬度。

我正在偵聽JS中的方向更改事件，以便在方向更改時調整視口大小。

初始頁面加載（縱向或橫向）上的一切看起來都很好。

但是，在方向更改后，Mobile Safari會保留先前的比例設置，而不是將視口擬合到屏幕。 雙擊或兩次拉直。 但我需要自動化。

我已經附上了下面的源代碼，並將其上傳到了一個演示URL 。

以下是方向更改后拍攝的屏幕截圖：從橫向到縱向，從縱向到橫向。

如何強制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>

Answer 1

我有這個問題並寫了一些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);

Answer 2

好的，畢竟答案在於*-scale屬性。

您可以通過將maximum-scale和minimum-scale設置為相同的值來強制使用特定比例。 但是，您必須通過將元標記設置為<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);
    }

Answer 3

使用這篇文章的智慧，只需獲取腳本容器的寬度和高度（窗口寬度和高度）... https://stackoverflow.com/a/9049670/818732

使用此視口： target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no解決了我在android和ios上的問題。 請注意，target-densitydpi將在除Android之外的所有其他設備上進行標記，但不會造成任何傷害。 它將確保沒有任何內容自動縮放。

Answer 4

與iOS有類似的問題，經過一些測試后你可以在這里找到解決方案

在視口寬度更改后重置iOS上的縮放

在我的解決方案中，縮放功能已禁用，但您可以自由刪除“user-scalable = no”以使其可縮放。

在方向更改后更改視口寬度后如何適應屏幕？

問題描述

4 個解決方案

解決方案1
9 2013-08-15 19:41:01

解決方案2
8 2012-08-24 17:56:15

解決方案3
3 2013-07-19 15:54:38

解決方案4
1 2015-12-23 14:18:38

在方向更改后更改視口寬度后如何適應屏幕？

問題描述

4 個解決方案

解決方案1 9 2013-08-15 19:41:01

解決方案2 8 2012-08-24 17:56:15

解決方案3 3 2013-07-19 15:54:38

解決方案4 1 2015-12-23 14:18:38

解決方案1
9 2013-08-15 19:41:01

解決方案2
8 2012-08-24 17:56:15

解決方案3
3 2013-07-19 15:54:38

解決方案4
1 2015-12-23 14:18:38