Trình duyệt mặc định của Android không di chuyển trang web

Question

Tôi đang gặp sự cố với trình duyệt Android chứng khoán trên trang tôi đang xây dựng. Nói một cách đơn giản, trang sẽ không cuộn theo chiều dọc mà không phóng to trước. Tôi nghĩ rằng tôi đã tìm ra khi tôi bắt gặp rằng thẻ đã báo cáo chiều cao nhỏ hơn cửa sổ trình duyệt, nhưng việc sửa chữa không khắc phục được sự cố cuộn. (Hộp màu đen trên trang chỉ mục báo cáo chiều cao tính toán của phần tử.)

Thiết bị thử nghiệm của tôi là Droid Incredible chạy Android 2.3. Tính năng cuộn hoạt động trong Firefox dành cho Android, cũng như máy tính bảng Android 4.0 của tôi và tất cả các thiết bị iOS.

dev My build của trang web là ở đây: www.adamjdesigns.info/csu/engage

EDIT - mã khác tôi đã cố gắng:

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

Any help is appreciated rất nhiều!

Answer 1

I figured it out! Có một số iframe cho một video trên YouTube trong trang và tôi không chắc liệu chính bản thân nó là iframe hay tập lệnh có liên quan để phát video bên trong nó, nhưng việc xóa nội dung đó khỏi DOM đã khắc phục được sự cố. (Tôi đã đặt nó ẩn ở chế độ ẩn trên màn hình thiết bị di động.)

Cảm ơn sự giúp đỡ của bạn, tất cả mọi người!

Answer 2

Hãy thử điều này cho khung nhìn của bạn:

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

Answer 3

Mặc dù đó là bản hack, tôi có một bản sửa lỗi khác có thể giúp nhà phát triển. Tôi thấy rằng với trình duyệt Android 2.3.4 cổ phiếu, nếu người dùng tăng kích thước tải trang ban đầu từ "1" lên kích thước tăng nhẹ, thao tác cuộn dọc sẽ không hoạt động mà không cần phải thu phóng đầu tiên. Ví dụ:

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

Answer 4

Điều tôi thấy là vấn đề tôi đã thêm tràn-x: ẩn; vào thẻ body của tôi. Điều này sẽ tắt thanh cuộn ngang, nhưng thay vào đó trong Android nó sẽ tắt cuộn dọc. Và trong Android, tôi chỉ có thể cuộn theo chiều ngang. Có thể là một lỗi trong trình duyệt Android. Tôi đang sử dụng điện thoại Android cũ (HTC Thunderbolt). Tôi đã đi qua tập tin css của tôi và loại bỏ tất cả overflow-x: ẩn và bây giờ tôi có thể di chuyển theo chiều dọc một lần nữa.

Answer 5

FWIW, tôi gặp sự cố tương tự với trang web của mình không cuộn trong Android 2.3. Tôi đã sử dụng câu trả lời của Gatsby với một số Javascript có điều kiện để khắc phục sự cố. Đây là mã cuối cùng của tôi:

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

Giải pháp này đầu tiên đặt bình thường thẻ meta viewport mà hoạt động tốt với hầu hết các thiết bị, sau đó sử dụng javascript có điều kiện để phát hiện các phiên bản android và thay đổi nội dung thẻ meta với giá trị "hack" (do Gatsby cung cấp) cho phép cuộn trên Android < = 2.3. Điều này ngăn cản việc cuộn ngang không cần thiết cho các thiết bị không cần hack.