определение ориентации ipad с метатегом как width = ширина устройства

Question

Я пытаюсь получить ориентацию на ipad с метатегом width = device-width. Но в этом представлении ширина обоих представлений составляет 768 пикселей, а top.orientation - 90. Поэтому я не могу определить ориентацию с помощью традиционных методов. Есть ли другой способ узнать это?

Answer 1

Вы можете добавить медиазапросы к вашему CSS нацеливать на IPad ориентации:

@media all and (device-width: 768px) and (device-height: 1024px) 
      and (orientation:portrait) { 
    /* css for ipad portrait */ 
} 
@media all and (device-width: 768px) and (device-height: 1024px) 
      and (orientation:landscape) { 
    /* css for ipad landscape */ 
} 

Для еще больше медиа запросов, предназначенных для различных устройств можно проверить, например, Detect different device platforms using CSS

Как указано в комментариях, ориентация должна быть обнаружена с использованием Javascript вместо CSS. Различные предложения для этого можно найти здесь: Detect iPad orientation change (который также может быть использован/вызван для загрузки страницы), например. подход просто проверить, если innerHeight больше innerWidth:

function isPortrait() { 
    return window.innerHeight > window.innerWidth; 
} 

упоминается в этом answer Мартинас.

Answer 2

Я не вижу, как вы можете получить ориентацию по ширине. Но вы можете использовать css для указания правил для ориентации

@media (min-width: 700px) and (orientation: landscape) { ... }