В адаптивном дизайне (на самом деле в веб-дизайн вообще) манипулирования или изменить содержание или внешний вид интерфейса по высоте не очень рекомендуется.
Пользователи, как правило, перемещаются с помощью прокрутки вниз при просмотре содержимого. Это то же самое как для переносных устройств, так и для настольных компьютеров.
Управление контентом по ширине - лучший подход, вам не нужно знать высоту.
Я могу дать немного список ссылок высоты, но имейте это в виду, так как он на самом деле не используется много, это не будет точным;
Extra small devices Phones (<640px)
Small devices Tablets (≥640px)
Medium devices Desktops (≥820px)
Large devices Desktops (≥900px)
Также я могу рекомендовать отзывчивый тестовый модуль инструментов разработчика Google Chrome. Помимо этого, существует множество онлайн-приложений и наборов для проверки визуального внешнего вида вашего дизайна на разных размерах устройств и размерах экрана.
Обратите внимание, что использование самых популярных размеров экрана устройства также может быть хорошим подходом.
Вот список популярных ручных устройств и их высоты;
- Apple, iPhone 7 - 667px
- Apple, iPhone 6 Plus, 6с Plus - 736px
- Apple, iPhone 6, 6с - 667px
- Apple, iPhone 5 - 568px
- LG G5 - 640px
- LG G4 - 640px
- Samsung Galaxy S7, S7 край - 640px
- Samsung Galaxy S6 - 640px
- Samsung Galaxy S4 - 640px
- Samsung Galaxy Nexus - 600px
- Samsung Galaxy Примечание 3 - 640px
- Microsoft Lumia 1020 - 480px
- Microsoft Lumia 925 - 480px
- Motorola Nexus 6 - 690px
- HTC One - 640px
- Sony Xperia Z - 640px
Проверьте эту ссылку для всех устройств и их размеров экрана; http://mydevice.io/devices/
Вы можете запросить «ориентацию» в мультимедийных запросах. Например, экран @media и (ориентация: пейзаж) {...} '. Это то, что вы ищете/спрашиваете? Кроме того, не используйте 'device-width' в ваших медиа-запросах. Вероятно, вы хотите использовать 'width'. – connexo
Ум, я знаю, как писать код в медиа-запросы, но я не знаю, откуда получить эти числа (ссылаясь на пиксели высотой устройства). Потому что везде я нахожу значения для ширины устройства, но как я могу правильно их протестировать на своем ноутбуке? Как изменить размер браузера? Мой экран - 1920 x 950. Как мне проверить тестовый сайт? –
Вы можете просто изменить размер окна браузера. Или вы можете использовать интерактивный режим webkit/firefox в инструментах разработчика –