Domyślna przeglądarka systemu Android nie przewija strony internetowej

Question

Mam problem z zapasem przeglądarki Android na stronie, którą buduję. Mówiąc prosto, strona nie będzie przewijać się w pionie bez wcześniejszego powiększania. Pomyślałem, że udało mi się to ustalić, gdy zauważyłem, że znacznik raportuje mniejszą wysokość niż okno przeglądarki, ale poprawienie nie rozwiązało problemu przewijania. (Czarne pole na stronie indeksu zgłasza obliczoną wysokość elementu.)

Moje urządzenie testowe to Droid Incredible z systemem Android 2.3. Przewijanie działa w Firefoksie na Androida, a także na moim tablecie z Androidem 4.0 i wszystkich urządzeniach z iOS.

Moje dev build strony jest tutaj: www.adamjdesigns.info/csu/engage

EDIT - Inne Kod Próbowałem:

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'}); }

Każda pomoc jest mile widziana!

Answer 1

I zorientowaliśmy się! Na stronie z filmem na YouTube był iframe i nie jestem pewien, czy jest to sama wersja skryptu, czy też powiązany z nią skrypt do odtwarzania wideo w środku, ale usunięcie tego z DOM rozwiązało problem. (I tak kazano ukryć na ekranach mobilnych).

Dzięki za pomoc, wszyscy!

Answer 2

Spróbuj tego dla rzutni:

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

Answer 3

Chociaż jest to hack, mam inną poprawkę, która może pomóc programistom. Zauważyłem, że w przypadku przeglądarki Android 2.3.4, jeśli zwiększono początkowy rozmiar strony od "1" do nieco większego rozmiaru, przewijanie w pionie działa bez konieczności maksymalnego zbliżenia. Na przykład:

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

Answer 4

Co znalazłem, że problem został dodałem overflow-x: hidden; do mojej etykiety ciała. Powinno to wyłączyć poziomy pasek przewijania, ale zamiast tego w Androidzie wyłącza się pionowy scroller. W Androidzie mogę przewijać tylko w poziomie. Prawdopodobnie błąd w przeglądarce Androida. Używam starych telefonów z Androidem (HTC Thunderbolt). Przeszedłem przez mój plik css i usunąłem cały overflow-x: hidden i teraz mogę przewijać w pionie ponownie.

Answer 5

FWIW, Miałem podobny problem z moją stroną internetową bez przewijania w systemie Android 2.3. Użyłem odpowiedzi Gatsby'ego z pewną warunkową wersją Javascript, aby naprawić problem. Tu jest mój ostateczny kod:

<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> 

Rozwiązanie to najpierw ustawia normalny meta tag rzutni który świetnie współpracuje z większością urządzeń, a następnie wykorzystuje JavaScript warunkową wykryć wersji Androida i zmienić metatagi do „hacked” wartości (dostarczone przez Gatsby), który pozwala na przewijanie na Androidzie < = 2.3. Zapobiega to niepotrzebnemu przewijaniu w poziomie dla urządzeń, które nie potrzebują hackowania.