Обнаружение и настройка окна просмотра в ipad - PullRequest
Новая
       29

Обнаружение и настройка окна просмотра в ipad

0 голосов
/ 10 октября 2011

У меня есть вопрос. здесь идет мой тестовый сайт. Тестовый сайт Проблема в том, что когда я вижу в любом симуляторе ipad, например, iPad Peek или oraginal ipad, появляется вертикальная полоса прокрутки, которую я не хочу. Я хочу, чтобы моя страница точно соответствовала высоте. Книга должна появиться в полном виде, без скроллеров. Кто-нибудь может помочь, пожалуйста?

Ответы [ 3 ]

1 голос
/ 10 октября 2011

Используйте css3 медиа-запрос для обнаружения и реализации окна просмотра 

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

Ссылка: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

0 голосов
/ 30 июня 2012

У меня точно такая же проблема. Я ввел 

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

в мой тег HTML. Красивый и блестящий iPad просто установил высоту окна просмотра на 1024 пикселя (проверено с помощью javascript), что не может быть правдой, потому что это его разрешение экрана, и он должен отображать адресную строку, строку состояния и т.д.

Единственное исправление, которое я могу придумать, - переписать метатег с помощью jquery при загрузке страницы 

$(document).ready(function(event){
  $('head meta[name=viewport]').remove();
  var content = "'initial-scale=1.0, height=" + window.innerHeight + "'";
  $('head').prepend("<meta name='viewport' content=" + content + " />");
});

.. это действительно очень противно, но это сработало.

0 голосов
/ 04 января 2012 
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
    for (i=0; i< metas.length; i++) {
        if (metas[i].name == "viewport") {
            metas[i].content = "width=device-width, minimum-scale=0.5, maximum-scale=1.0";
        }
    }
    document.getElementsByTagName('body')[0].addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
    for (i=0; i<metas.length; i++) {
        if (metas[i].name == "viewport") {
            metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
        }
    }
}
...