метатег для проблемы ориентации iPad

Question

Изначально я использовал метатег:

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

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

Затем я попробовал следующий метатег на моей странице:

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

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

Нужно ли использовать медиазапросы, чтобы страница подходила как в альбомном, так и в портретном режиме, или есть метатег, который поможет добиться этого?

Answer 1

Я нашел хорошее решение для этого:

метатег:

<meta name="viewport" id="viewport" content="width=device-width,minimum-  scale=1.0,maximum-scale=10.0,initial-scale=1.0" />

JavaScript с jQuery:

var mobile_timer = false;
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-     scale=1.0,initial-scale=1.0');
$(window).bind('gesturestart',function () {
    clearTimeout(mobile_timer);
    $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
}).bind('touchend',function () {
    clearTimeout(mobile_timer);
    mobile_timer = setTimeout(function () {
        $('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
    },1000);
});
}

Сценарий в основном запрещает масштабирование iPhone, если жесты не обнаружены, просто укажите это в своем html, и вы должны быть в порядке;) Источник: http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape

Я также установил этот медиазапрос для iPhone

@media screen and (max-device-width: 480px)
{
    html
    {
        -webkit-text-size-adjust: none;
    }
}