HTML CSS-макет уменьшается в альбомном режиме iPad?

#html #css #ipad #mobile-safari

#HTML #css #iPad #mobile-safari

Вопрос:

Я создаю макет для iPad, и ширина макета составляет 950 пикселей, и когда я перехожу в альбомный режим, я не получаю никакой горизонтальной полосы прокрутки (которая на самом деле у меня должна быть, потому что ширина макета фиксирована в пикселях, что составляет 950 пикселей, а не 786px), все в порядке, но высота верхней строки заголовка уменьшается.

Что я делаю не так. Я хочу, чтобы мой макет не уменьшался в альбомном режиме. каждый элемент должен иметь ту же высоту, что и в портретном режиме.

Ответ №1:

Я подозреваю, что viewport мета-кран изменяет размер вашего сайта. Попробуйте зафиксировать масштаб на 1 в начальных, максимальных в минимальных значениях.

 <meta name="viewport" content="width=950, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

1. нужно ли указывать ширину? потому что в портретном режиме ширина будет другой

2. Вы можете попробовать с width=device-width , но я не уверен в результате. Вы также можете обнаружить событие orientationchange.

3. Имейте в виду, что отключение «масштабирования» создает проблему доступности, не позволяя пользователям контролировать и масштабировать дисплей, если они этого захотят.

Ответ №2:

Я не знаю, происходит ли это с вами, но в iOS есть ошибка, из-за которой масштаб меняется при переключении между портретным и альбомным режимами. Смотрите http://www.blog .highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug /

Вы можете исправить это следующим образом:

Добавьте этот мета-тег в заголовок HTML-документа:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

И добавьте этот JavaScript на страницу — см. https://gist.github.com/90129

 (function(doc) {

var addEvent = 'addEventListener',
    type = 'gesturestart',
    qsa = 'querySelectorAll',
    scales = [1, 1],
    meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

function fix() {
    meta.content = 'width=device-width,minimum-scale='   scales[0]   ',maximum-scale='   scales[1];
    doc.removeEventListener(type, fix, true);
}

if ((meta = meta[meta.length - 1]) amp;amp; addEvent in doc) {
    fix();
    scales = [.25, 1.6];
    doc[addEvent](type, fix, true);
}

}(document));

Ответ №3:

На устройствах webkit (Android / iOS) вы можете использовать этот CSS для основного текста, чтобы предотвратить изменение размера текста после изменения ориентации (поворота). Мне потребовалось некоторое время, чтобы отследить это. Надеюсь, это поможет другим с этой странной функцией.

 <style>
body {
     -webkit-text-size-adjust: none;
}
</style>

Ответ №4:

 <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

Это также может быть полезно