Як встановити мета вікна перегляду для iPhone, яка правильно обробляє обертання?

Отже, я використовую:

<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/Preventing-Scrolling-on-iPhone-Phonegap-Applications

Зі сторінки:

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

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

Я придумав трохи інший підхід, який повинен працювати на різних платформах

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

Поки що я тестував на

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

• Samsung galaxy s
• Samsung galaxy s2
• Примітка Samsung Galaxy (але довелося змінити css на 800px [див. Нижче] *)
• Motorola

• iPhone 4

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

Це величезний губ вперед з мобільною розробкою ...

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

Спочатку додайте такий 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];

Додаткове налаштування можна зробити, змінивши більше налаштувань вмісту порталу перегляду:

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.

Сподіваюся, це комусь допомагає :)

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

підтримувати всі iphone, всі ipads, всі андроїди.

просто хочу поділитися, я погрався з налаштуваннями області перегляду для мого чуйного дизайну, якщо встановив максимальну шкалу на 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);