Tại sao thẻ khung nhìn trên Galaxy Nexus/Android 4 không hoạt động?

Question

Tôi đang làm việc trên webApp nên thay đổi kích thước cho bất kỳ kích thước màn hình nào mà thiết bị có thể có. Trên iOS và các phiên bản Android cũ hơn, thẻ viewport hoạt động tốt. Hình ảnh trên màn hình luôn được thay đổi kích thước để vừa với màn hình.
(Như được mô tả ở đây: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
Trên Galaxy Nexus (Android 4.0), nó sẽ không hoạt động. Ở bên trái và bên phải là khoảng 20px không gian và tôi không biết tại sao anh ấy làm điều này. tag viewport của tôi trông như thế này:

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

Không có vấn đề gì tôi thay đổi về thẻ, không gian luôn ở đó và nội dung không phù hợp với màn hình. Tôi đã tạo trang mẫu để cho bạn thấy hiệu ứng: http://easyeve.w3y.de/link/index.html
Nếu bạn mở liên kết này trên iPhone, nội dung hoàn toàn phù hợp (bạn sẽ không thấy bất kỳ thứ gì màu vàng = thân) và chiều rộng tài liệu là 320px. Trên Galaxy Nexus, bạn sẽ thấy không gian màu vàng và chiều rộng tài liệu là 360px (chính xác là một nửa độ phân giải màn hình). Điều này cũng nên là 320px! Bạn có gặp vấn đề này không và có cách nào để khắc phục sự cố không?

Cập nhật: Tôi đã nhận thấy cùng một vấn đề trên Galaxy Note/Android 2.3.6 Vì vậy, đó không phải là vấn đề Android 4. Nó đã làm với kích thước màn hình lớn, tôi đoán ..

Answer 1

Các vấn đề rất tương tự ở đây (Galaxy Nexus - Android 4.0.2), tôi đang nói về thường xuyên trang web trong trình duyệt mặc định

Setting viewport meta quy mô ban đầu nhỏ hơn 1 (thu nhỏ) dường như bị bỏ qua bởi trình duyệt. Giá trị cao hơn 1 (phóng to) hoạt động tốt.

Có các cài đặt trong trình duyệt (settings-> nâng cao) nơi bạn có thể thay đổi mọi thứ:

1. Mặc định zoom - nó làm cho sự khác biệt, nhưng nó không khắc phục vấn đề
trang
2. Auto-fit - trong trường hợp của tôi làm cho không có sự khác biệt

Tất cả mọi thứ dường như chỉ làm việc hoàn hảo trong trình duyệt Chrome (beta vào lúc này), nhưng đó là không trình duyệt mặc định cho ICS/Galaxy Nexus.

UPDATE (giải pháp):

Thiết meta viewport "width = device-width" không thành công trên Galaxy Nexus.
Đặt chế độ xem "width = 1280" chỉ hoạt động tốt (1280px là chiều rộng của màn hình của thiên hà nexus).

Cẩn thận thiết lập đó "width = 1280, sử dụng khả năng mở rộng = không" phá vỡ nó một lần nữa (bạn có thể thu nhỏ thậm chí nếu có người sử dụng khả năng mở rộng = không) :(

Answer 2

tôi đã kết thúc tranh cãi với vấn đề này ngày hôm nay Vấn đề của tôi phức tạp hơn một chút, bởi vì tôi phải đối phó với một bản định kiểu Wordpress (từ một chủ đề khác) ngoài CSS cơ sở. Chrome hoạt động hoàn hảo trên điện thoại và máy tính bảng của tôi và trình duyệt chứng khoán cũng hoạt động tốt trên máy tính bảng Tuy nhiên, trình duyệt chứng khoán tiếp tục thu nhỏ và hiển thị cho tôi chế độ xem trên máy tính để bàn.Không có lợi nhuận ở hai bên, đó là hành vi đúng, nhưng trình duyệt nên đã loại bỏ các phao nổi từ thanh bên của tôi và nội dung divs và phóng to vào nội dung chính (Tôi đang sử dụng truy vấn @media). Nghe có vẻ kỳ lạ, tôi thực sự đã khắc phục điều này bằng cách đầu tiên đặt cài đặt Thu phóng thành Viễn, làm mới và sau đó đặt lại Thu phóng thành Vừa và làm mới.

Tôi nên chỉ ra rằng khi tôi xem HTML và CSS của trang, tôi nhận thấy rằng bạn đặt chiều rộng pixel cụ thể cho div trang của bạn. Tôi khá chắc chắn bạn cần sử dụng tỷ lệ phần trăm cho chiều rộng thay thế. Ví dụ: div nội dung trung tâm của tôi có margin: 0 auto;, min-width:320px;, max-width:900px; và width:100%;.

Answer 3

Tôi đã chạy vào nội dung nào đó tương tự trên Galaxy Tab 2. Khi thiết lập cài đặt web cho applcation, hãy thử đặt webViewSettings.setUseWideViewPort (true); Điều này sẽ buộc Android xem xét thẻ meta chế độ xem. Nó đã bị bỏ qua trong trường hợp của Galaxy Tab 2 cho ứng dụng của tôi và mọi thứ trong khung nhìn đã được vẽ không chính xác cho đến khi tôi thay đổi điều này.