Как правильно масштабировать страницу в ipad Safari?без участия CSS - PullRequest
2 голосов
/ 08 декабря 2011

Моя страница размером 980 пикселей, она отлично смотрится в альбомной ориентации, но в портретной части она обрезана.поэтому я попробовал

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

Он показывает портрет идеально, но в альбомной ориентации он слишком мал.Я попытался решить эту проблему с помощью js, чтобы определить, когда меняется ориентация, и сбросить свойства области просмотра, не работает или работает до предела, но с ужасными ошибками.Я не могу использовать медиа-запросы css, потому что сайт 980 и не может измениться.

Есть ли способ сделать то, что мне нужно?спасибо

РЕДАКТИРОВАТЬ

Я пробовал что-то вроде

if (orientation == 0 || orientation == 180) {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=990px");
}
else {
    viewport.attr("content", "");
    viewport.attr("content", "user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=990px");
}

определение, когда вращается ipad, но масштабирование с использованием области просмотра никогда не работает должным образом

Ответы [ 2 ]

5 голосов
/ 11 марта 2012

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

@media only screen and (orientation : portrait) {
    body {
        -webkit-transform: scale(0.75);
    }
}
1 голос
/ 08 марта 2012

Разве это не сработает?Мои веб-страницы отзывчивы, но даже на страницах фиксированной ширины у меня возникают проблемы с отображением на страницах глупых страниц при изменении ориентации, которые я решил:

метатег

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

Вслед за этим JS, который я нашел здесь: http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape (работает на iPad, если вы добавите проверку userAgent.)

iOSZoom.js (требуется 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);
    });
}

, затем <script src="iOSZoom.js" type="text/javascript"></script> и как новый: D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...