it-roy-ru.com

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

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

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

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

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

76
George Armhold

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

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

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

108
Tobias Cohen

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

http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Со страницы:

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

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

18
Matt Lyons

Вы не хотите потерять опцию масштабирования пользователя, если можете помочь. Мне нравится это решение 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>
10
And Finally

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

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

Пока я проверил на 

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

  • Samsung Galaxy с
  • Samsung Galaxy S2
  • Samsung Galaxy Note (но пришлось изменить CSS на 800 пикселей [см. Ниже] *)
  • Motorola 
  • ай фон 4

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

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

2
Val

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

1
Randy Kato

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

Сначала добавьте следующий 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) из методаInterfaceOrientation добавьте:

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

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

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta -Tags.htm

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

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

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

поддержать все iphone, все ipads, все андроиды.

0
Piseth Sok