В настоящее время я пытаюсь понять, как обрабатывать точки останова в css для увеличения UX, особенно когда речь идет о планшетах.
Я использую инструменты google chrome dev, чтобы соответствующим образом кодировать его. Теперь, когда я закончил работу с точками останова / стилями Ipad, я проверил его вживую на своем собственном IPad (6-го поколения) как в портретной, так и в альбомной ориентации. Портретная версия выглядит 1: 1, как в предварительном просмотре инструментов dev, но альбомная версия выглядит немного иначе в живом, чем в предварительном просмотре инструмента dev (она обрезается и некоторые элементы DOM перемещаются).
Почему это так? ? Нужно ли учитывать, что в верхней части экрана есть панель safari, которая фактически уменьшает доступное пространство для моего веб-приложения? Если так, то почему инструменты разработки не учитывают это или как я могу это сделать во время разработки?
Предварительный просмотр инструментов разработчика:
Живой скриншот с моего IPad:
Я использую эту точку останова:
/* iPad Standard Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
*styles*
}