Как отобразить html-страницу на ширине модального листа «Форма» на iPad без жесткого кодирования ширины страницы?

Question

Я знаю ширину модального листа «Форма» на экране iPad (540 x 620), ширину экрана iPad (768 x 1024) и ширину экрана iPhone (320 x 480) )… Но при загрузке html-страницы в модал «Лист формы» ширина по умолчанию равна ширине устройства согласно метатегу области просмотра:

<meta name="viewport" content="width=device-width">

Это необходимо для отображения страницы на ширину устройства, на котором оно находится, что отличается от ширины устройства. Поскольку iPad будет иметь несколько значений ширины.

Я загружаю веб-страницу в модал «Форма листа» на iPad и на весь экран при просмотре в приложении для iPhone.

Как заставить веб-страницу отображаться по ширине модального листа «Форма листа» на iPad без жесткого кодирования ширины?

Пока единственное решение, которое я нашел для работы, это не устанавливать ширину устройства и создать веб-страницу шириной 100%.

Answer 1

Вы можете установить атрибуты области просмотра через javascript, а также в метатеге - я думаю, что это будет самое чистое решение:

if (window.innerWidth == 420) {
    //For form sheet modal
    document.body.setAttribute('width', 420);
    document.body.className += 'iPadModal';
} else if (window.innerWidth == 320) {
    //For iPhone portrait
    document.body.setAttribute('width', 320);
    document.body.className += 'iPhonePortrait';
} // ... etc..

Теперь в этом примере используется довольно грубое обнаружение - возможно, было бы лучше прослушать другие атрибуты, которые iPhone придает документу, чтобы более точно определить, на каком экране отображается ваша страница (ширина, высота, начальный масштаб, пользователь -масштабируемый, минимальный масштаб и максимальный масштаб)

Вот хорошая ссылка на эти атрибуты: http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

Answer 2

<meta name="viewport" content="user-scalable=no, width=device-width, minimum-scale=1, maximum-scale=1" />