Страница 100% высоты JQuery для мобильных устройств, равная видимой области - PullRequest
Новая
       0

Страница 100% высоты JQuery для мобильных устройств, равная видимой области

3 голосов
/ 15 декабря 2011

У меня проблема с высотой сайта на iphone. Следующая настройка работает довольно хорошо на всех других устройствах (ipad, android телефоны), но на устройстве iphone высота сайта не будет обновляться после исчезновения панели URL и появления пустой области внизу страницы. 

<!DOCTYPE html> 
<html> 
    <head>
        <title>temp</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

        <style type="text/css">
            .ui-page{
                min-height: 100% !important;
            }
        </style>    
    </head> 

    <body> 
        <div data-role="page" id="loadscreen" data-theme='c'>
            <div data-role="content">
                <div>
                    <a href="#" onClick="window.scrollTo(0, 1)">Scroll Up</a>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

Сайт: http://jsfiddle.net/hb8NH/2/

Ответы [ 3 ]

1 голос
/ 03 августа 2012

Удалить 

.ui-page{
    min-height: 100% !important;
}

JQueryMobile рассчитывает необходимую высоту и устанавливает стиль минимальной высоты для страницы, чтобы убедиться, что он заполняет всю страницу.

Вы заметите, что на iPhone в Safari (после удаления минимальной высоты) вы получаете небольшую доступную прокрутку, которая будет скрывать ваш текст «Прокрутка вверх». JQueryMobile рассчитывает минимальную высоту на основе размера экрана, я считаю. Таким образом, при сохранении на главном экране iphone (где нет панелей инструментов, верхнего или нижнего колонтитула safari), ваша страница все равно будет заполнять экран.

0 голосов
/ 21 октября 2013

Попробуйте установить собственное свойство webView: 

    // fix orientation issue
 [webView setAutoresizingMask:(UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth)];

Это работает для меня.

0 голосов
/ 15 декабря 2011

Попробуйте изменить следующее 

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

Для 

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Это точно делает трюк для меня.

...