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

Ответ 1

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

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

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

Ответ 2

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

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 находится.

Ответ 3

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

Ответ 4

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

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

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

Самсунская галактика 2

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

• iPhone 4

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

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

Ответ 5

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

Ответ 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) из метода InternfaceOrientation добавьте:

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-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

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

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

Ответ 7

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

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

Ответ 8

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

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

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

Ответ 9

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

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

window.addEventListener('orientationchange', doOnOrientationChange);