Браузер Android по умолчанию не прокручивает веб-страницу

у меня проблема с браузером Android на странице, которую я создаю. Проще говоря, страница не будет прокручиваться по вертикали без увеличения масштаба. Я думал, что понял это, когда поймал, что тег сообщает меньшую высоту, чем окно браузера, но исправление этого не вылечило проблему прокрутки. (Черное поле на странице индекса сообщает вычисленную высоту элемента.)

мое тестовое устройство-это дроид, работающий под управлением Android 2.3. Прокрутка работает Firefox для Android, а также планшет с Android 4.0 и iOS устройств.

мои сборки сайта здесь: www.adamjdesigns.info/csu/engage

EDIT-другой код, который я пробовал:

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  2. if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) { $('html').css({'height':$(window).height(),'overflow':'auto'}); }

любая помощь очень ценится!

9
android browser mobile responsive-design scroll

5 ответов

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

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

Я все понял! Там было iframe для видео YouTube на странице, и я не уверен, что это iframe сам или связанные скрипты для воспроизведения видео внутри него, но удаление этого из DOM решило проблему. (В любом случае, я установил его скрытым на мобильных экранах.)

Спасибо за вашу помощь, все!

3

FWIW, у меня была аналогичная проблема с моей веб-страницей, не прокручивающейся в Android 2.3. Я использовал ответ Гэтсби с некоторым условным Javascript, чтобы исправить проблему. Вот мой окончательный код:

<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
    window.onload=function(){
        var ua = navigator.userAgent;
        if(ua.indexOf("Android")>=0){
            var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8)); 
            if(androidversion<=2.3){
                document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
            }
        }
    };
</script>

Это решение сначала устанавливает обычный тег meta viewport, который отлично работает с большинством устройств, затем использует условный javascript для обнаружения версии android и изменения содержимого мета-тега на "взломанное" значение (предоставленное Гэтсби), которое позволяет прокручивать на Android

3

Я обнаружил, что проблема в том, что я добавил overflow-x: hidden; к моему тегу тела. Это должно отключить горизонтальную полосу прокрутки, но вместо этого в Android он выключает вертикальный скроллер. И в Android я могу прокручивать только горизонтально. Вероятно, ошибка в браузере Android. Я использую старые телефоны android (HTC Thunderbolt). Я прошел через свой файл css и удалил все переполнение-x:hidden, и теперь я могу прокручивать по вертикали снова.

2

попробуйте это для просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
1