Я делаю веб-приложение в основном для iOS. Я хочу, чтобы он работал в ландшафте и на портрете, как если бы это было родное приложение (поэтому никакого масштабирования). Я обнаружил, что при настройке
<meta name="viewport" content="width = device-width, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">
Работает для портрета; Высота устройства - полная высота на портрете, а ширина устройства - полная ширина в портрете. Однако, когда устройство повернуто к ландшафту, Safari по-прежнему пытается обеспечить первоначальную ширину (320) в новой ширине ландшафта (масштабируется от 320 до 480). Я попытался динамически сбросить окно просмотра, например
document.getElementById("viewport").setAttribute('content', 'width = ' + maxWidth + ', height = ' + maxHeight + ', maximum-scale = 1.0, minimum-scale = 1.0');
Где maxHeight и maxWidth являются новыми значениями высоты и ширины после переориентации, но Safari дает "undefined; TypeError:" null "не является ошибкой объекта.
Я не хочу указывать разные таблицы стилей для каждого условия (экран iphone, экран сетчатки iphone, ipad и возможная сетка ipad в ближайшее время), поскольку 1. Я хочу сохранить его общий 2. Я бы хотел, чтобы он работал на других браузерах тоже 3. Я ленивый
Итак, я надеюсь, что у меня есть смысл... может ли кто-нибудь помочь мне здесь? По сути, я хочу изменить область просмотра во время выполнения, чтобы соответствовать высоте пейзажа/портрета. Благодаря
Изменить: решение Я использовал getElementById, но у видового экрана по умолчанию не было ID. Поэтому я просто добавил его, и теперь он работает.
<meta name="viewport" id="viewport" content="width = device-width, height = device-height, maximum scale = 1.0, minimum-scale = 1.0">
Однако при первом запуске страницы (onload) он не устанавливает его должным образом. Поэтому я добавил setOrientation() в нижней части страницы, чтобы он установил ориентацию (первый раз) после полной загрузки страницы (при настройке окна просмотра на размер окна при загрузке он имел некоторые фанковые размеры).
Решение является ссылкой для кого-то позже, кто может быть заинтересован в этом.
Спасибо всем!