it-swarm.com.ru

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

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

Я корректирую ширину содержимого 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, кажется, ничего не делает.

From landscape to portrait

From portrait to landscape

<!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>
19
Adam Florin

У меня была эта проблема и я написал немного 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);
9
Greg Smith

Хорошо, ответ лежит в атрибутах *-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);
    }
8
Adam Florin

используйте мудрость этого поста и просто получите ширину и высоту контейнера вашего скрипта (ширина окна и высота) ... https://stackoverflow.com/a/9049670/818732

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

3
Jörn Berkefeld

У меня была похожая проблема с iOS, после некоторого тестирования вы нашли решение, которое вы можете найти здесь.

Сбросить масштаб на iOS после изменения ширины области просмотра

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

0
Fabio C.