Установить различную начальную шкалу для пейзажа и портрета

Ответ 1

Код JavaScript из исходного вопроса был довольно точным и был почти правильным. Проблема, когда я тестировалась в браузере, была следующей: window.orientation is undefined и поэтому предложение switch является избыточным.

Демо для моего фиксированного решения можно найти здесь: JS Bin, но не забудьте проверить его на мобильном устройстве (подробнее об этом читайте ниже).

Суть заключается в коде JavaScript, который заключается в следующем:

function onOrientationChange() {

    var landscape = screen.width > screen.height;
    var viewportmeta = document.querySelector('meta[name="viewport"]');

    if(landscape) {

        viewportmeta.content = "width=device-width, initial-scale=1.0";

    } else {

        viewportmeta.content = "width=device-width, initial-scale=0.5";

    }

}

window.addEventListener('orientationchange', onOrientationChange);
onOrientationChange();

Можно видеть, что я не использовал window.orientation, поскольку это вызывало проблемы при тестировании в браузере, поэтому я просто проверил пропорции ширины и высоты экрана: var landscape = screen.width > screen.height. Кроме того, при установке viewportmeta.content я заменил все значение, а не только часть initial-scale=0.6, как в исходном вопросе.

Поскольку у меня есть только Android-устройства для тестирования, я также удалил предложение IF относительно обнаружения iPhone и iPad. Поэтому решение также работает в настольных браузерах. Но имейте в виду, что настольные браузеры не могут запустить событие orientationchange. Я пробовал мобильный эмулятор Chrome, и он не работает. Мое обходное решение состояло в том, чтобы временно изменить событие на resize.

Ответ 2

Ваш оригинальный ответ действительно все, что вам нужно (однако вы пропустили закрытие } в своем фрагменте кода, и я предполагаю, что это была только опечатка, а не причина, почему она не работает)!

Использование ширины, как указано в другом ответе, не будет определять портрет и пейзаж, потому что устройство iOS считает, что ширина является самым коротким размером, а высота - самым длинным размером независимо от ориентации. Поэтому ваш оператор switch необходим для вашего решения и именно то, что вам нужно (см. здесь).

Я взял ваш код и запустил его на своем iPhone в этом jsFiddle (с некоторыми настройками, такими как добавление отсутствующей закрывающей скобки), и он работал нормально. Если вы проверите панель HTML на скрипке после удаления обнаружения Useragent (или вместо этого имитируете iPhone в хроме), вы увидите, что он обновляет содержимое meta до initial-scale=0.8, поскольку это значение по умолчанию.

https://jsfiddle.net/80xj03cx/3/

Очевидно, что это не будет работать в браузере из-за обнаружения Useragent и что нет такого события, как orientationChange. Если вам нужно устройство iOS для запуска, вы всегда можете использовать такую ​​услугу: https://appetize.io/demo (вы даже можете ввести URL этой скрипты в демо, чтобы увидеть, как он работает).

function doOnOrientationChange() {  
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    switch(window.orientation) 
    {  
      case -90:
      case 90:
        alert('landscape'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.6';
        break; 
      default:
        alert('portrait'); // Just for debug obviously
        viewportmeta.content = 'initial-scale=0.8';
        break; 
    }
}

// Only bind the event on iPhone and iPad so we do not try and do this on any other device.
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    window.addEventListener('orientationchange', doOnOrientationChange);
    // Initial execution if needed
    doOnOrientationChange();
}