Как настроить видовой экран meta для iPhone, который правильно обрабатывает вращение?

StackOverflow https://stackoverflow.com/questions/1230019

  •  22-07-2019
  •  | 
  •  

Вопрос

Итак, я использовал:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

чтобы мой HTML-контент красиво отображался на iPhone.Он отлично работает до тех пор, пока пользователь не переведет устройство в альбомный режим, где разрешение экрана остается ограниченным до 320 пикселей.

Есть ли простой способ указать область просмотра, которая изменяется в ответ на изменение пользователем ориентации устройства ?Или я должен прибегнуть к Javascript, чтобы справиться с этим?

Это было полезно?

Решение

Просто пытался решить это сам, и решение, которое я придумал, было: 

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

Это, кажется, блокирует устройство в масштабе 1,0 независимо от его ориентации. Как побочный эффект, он полностью отключает масштабирование пользователя (масштабирование и т. Д.).

Другие советы

Для всех, кто еще заинтересован:

http://wiki.phonegap.com/w/page / 16494815 / Предотвращение-скроллинг-на-iPhone-PhoneGap-приложений

со страницы 

<meta name="viewport" content="user-scalable=no,width=device-width" />
  

Это указывает Safari на предотвращение   пользователь от увеличения на страницу   с "щепоткой" жест и исправляет   ширина порта просмотра в ширину   экран, который когда-либо ориентирует   iPhone включен.

Вы не хотите потерять возможность масштабирования пользователя, если можете помочь. Мне нравится это решение JS из здесь . 

<script type="text/javascript">
(function(doc) {

    var addEvent = 'addEventListener',
        type = 'gesturestart',
        qsa = 'querySelectorAll',
        scales = [1, 1],
        meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

    function fix() {
        meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
        doc.removeEventListener(type, fix, true);
    }

    if ((meta = meta[meta.length - 1]) && addEvent in doc) {
        fix();
        scales = [.25, 1.6];
        doc[addEvent](type, fix, true);
    }

}(document));
</script>

Я предложил несколько иной подход, который должен работать на разных платформах

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

До сих пор я тестировал на

Галактика Самсун 2

  • Samsung galaxy s
  • Samsung galaxy s2
  • Samsung galaxy Note (но пришлось изменить css на 800 пикселей [см. Ниже] *)
  • Моторола

  • iPhone 4

    • @media screen and (max-width:800px) {

Это огромный шаг вперед в области мобильной разработки ...

Вы настраиваете его на невозможность масштабирования (максимум-масштаб = начальный масштаб), поэтому он не может масштабироваться при повороте в альбомный режим. Установите максимум-масштаб = 1,6, и он будет масштабироваться должным образом, чтобы соответствовать ландшафтному режиму.

Я сам столкнулся с этой проблемой, и я хотел иметь возможность устанавливать ширину, обновлять ее при повороте и позволять пользователю масштабировать и масштабировать страницу (текущий ответ дает первое, но предотвращает позднее как побочный эффект) .. поэтому я придумала исправление, которое сохраняет ширину вида, правильную для ориентации, но все же допускает масштабирование, хотя оно не супер прямое.

Сначала добавьте следующий Javascript на отображаемую веб-страницу: 

 <script type='text/javascript'>
 function setViewPortWidth(width) {
  var metatags = document.getElementsByTagName('meta');
  for(cnt = 0; cnt < metatags.length; cnt++) { 
   var element = metatags[cnt];
   if(element.getAttribute('name') == 'viewport') {

    element.setAttribute('content','width = '+width+'; maximum-scale = 5; user-scalable = yes');
    document.body.style['max-width'] = width+'px';
   }
  }
 }
 </script>

Затем в свой метод - (void) didRotateFromInterfaceOrientation: (UIInterfaceOrientation) fromInterfaceOrientation добавьте: 

float availableWidth = [EmailVC webViewWidth];
NSString *stringJS;

stringJS = [NSString stringWithFormat:@"document.body.offsetWidth"];
float documentWidth = [[_webView stringByEvaluatingJavaScriptFromString:stringJS] floatValue];

if(documentWidth > availableWidth) return; // Don't perform if the document width is larger then available (allow auto-scale)

// Function setViewPortWidth defined in EmailBodyProtocolHandler prepend
stringJS = [NSString stringWithFormat:@"setViewPortWidth(%f);",availableWidth];
[_webView stringByEvaluatingJavaScriptFromString:stringJS];

Дополнительную настройку можно выполнить, изменив другие параметры содержимого окна просмотра:

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone-- IPADS-Viewport-ориентация-Using-JavaScript-CSS-и-Meta-Tags.htm

Кроме того, я понимаю, что вы можете установить JS-слушатель для onresize или что-то вроде этого, чтобы инициировать изменение масштаба, но это сработало для меня, так как я делаю это из каркасов Cocoa Touch UI.

Надеюсь, это кому-нибудь поможет:) 

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">

поддерживает все iphone, все ipads, все androids.

просто хочу поделиться, я поигрался с настройками области просмотра для моего адаптивного дизайна, если я установил максимальный масштаб на 0,8, начальный масштаб на 1 и масштабируемый на нет, тогда я получу наименьшее представление в портретном режиме и iPad-представление для пейзажа: D ... это действительно уродливый хак, но, похоже, это работает, я не знаю почему, поэтому я не буду его использовать, но интересные результаты 

<meta name="viewport" content="user-scalable=no, initial-scale = 1.0,maximum-scale = 0.8,width=device-width" />

наслаждайтесь:)

Почему бы просто не перезагрузить страницу, когда пользователь поворачивает экран с помощью JavaScript 

function doOnOrientationChange()
{
location.reload();
}

window.addEventListener('orientationchange', doOnOrientationChange);
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top