Как настроить экран после изменения ширины видового экрана при изменении ориентации?

Мне нужна ширина области просмотра для страницы размером 950 пикселей в альбомной ориентации и 630 пикселей в портрете. Эти ширины пикселей, к сожалению, негибкие.

Я настраиваю ширину содержимого DOM на основе ориентации с использованием запросов в формате CSS.

Я слушаю события изменения ориентации в JS для изменения размера окна просмотра при изменении ориентации.

Все выглядит хорошо при начальной загрузке страницы (портретной или альбомной).

Однако после изменения ориентации Mobile Safari сохраняет предыдущий масштаб, вместо установки окна просмотра на экран. Двойной кран или два выпрямляют его. Но мне нужно, чтобы это было автоматически.

Я добавил источник ниже и загрузил его в демонстрационный URL.

Ниже приведены снимки экрана, сделанные после изменения ориентации: от пейзажа до портрета и от портрета к пейзажу.

Как заставить Safari автоматически устанавливать ширину окна просмотра на ширину экрана? Или я все об этом неправильно?

Изменение настроек масштаба в окне просмотра не помогло. Настройка maximum-scale=1.0 или initial-scale=1.0 кажется переопределяющей мой width, установка width на device-width (т.е. 1024 или 768 на моем iPad 2), оставляя пространство мертвого поля. Установка 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>

Ответ 1

У меня была эта проблема, и я написал несколько JavaScript, чтобы исправить это. Я надел его на Гитуба:

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);

Ответ 2

ОК, ответ лежит в атрибутах *-scale.

Вы можете настроить конкретный масштаб, установив для обоих значений maximum-scale и minimum-scale одно значение. Но вы должны пожертвовать масштабированием пользователя, установив метатег на <meta name='viewport' content='user-scalable=no' />.

Обратите внимание, что настройки *-scale относятся к размерам экрана устройства, которые варьируются от устройства к устройству. К счастью, вы можете посмотреть их в объекте screen в JS.

Итак, если ваша ширина содержимого меньше 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);
    }

Ответ 3

используйте мудрость этого сообщения и просто получите ширину и высоту контейнера вашего script (ширина окна и высота)... fooobar.com/questions/48297/...

с помощью этого окна просмотра: target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no решил мои проблемы на Android и ios. Обратите внимание, что target-densitydpi будет помечен на ВСЕХ других устройствах, но Android, но не навредит. Он будет следить за тем, чтобы ничто не масштабировалось автоматически.

Ответ 4

Имел аналогичную проблему с iOS, после того, как некоторое тестирование закончилось решением, вы можете найти здесь

Reset Увеличить iOS после изменения ширины видового экрана

В моем решении масштабирование отключено, но вы можете свободно удалить "user-scalable = no", чтобы сделать его масштабируемым.