HTML CSS макет сокращается в ландшафтном режиме iPad?

Question

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

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

Answer 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

Answer 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]) && addEvent in doc) {
    fix();
    scales = [.25, 1.6];
    doc[addEvent](type, fix, true);
}

}(document));

Answer 3

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

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

Answer 4

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

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