Tại sao các trình duyệt di động tải trang của tôi được phóng to hoàn toàn?

Question

Tôi hiện đang làm việc trên một trang web cho khách hàng (vẫn đang trong quá trình thực hiện) và đang cố khắc phục một số sự cố trên thiết bị di động trên trang web.

Vấn đề chính mà tôi gặp phải là trình duyệt di động (android + iphone) tải trang web được phóng to hoàn toàn ở phần trên cùng bên trái của trang web. Tôi muốn nó được thu nhỏ để vừa với chiều rộng toàn bộ trang web trong chế độ xem, bất kể chiều rộng của chế độ xem.

Các trang web có thể được xem tại đây: http://www.graceprep.com

Có một sửa chữa dễ dàng cho việc này? Tôi có kinh nghiệm với HTML/CSS nhưng tôi là một chút của một newbie khi nói đến trình duyệt di động.

Dưới đây là một số HTML trong tệp header.php của tôi có thể có liên quan. Tôi đã thử thay đổi thuộc tính chiều rộng thành không có kết quả. Thuộc tính quy mô ban đầu có hiệu quả nhưng quá rộng - tôi muốn trang web được thu nhỏ hoàn toàn cho tất cả các trình duyệt di động, bất kể định hướng hoặc kích thước màn hình.

Có cách nào để thực hiện việc này không?

Answer 1

Tại sao bạn có thẻ meta đó? Nếu bạn xóa hoàn toàn, thiết bị sẽ tự động quyết định mức thu phóng.

Answer 2

Tôi gần như tích cực mà

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

nên giải quyết vấn đề đó. Bạn có thể đặt "chiều rộng" thành bất kỳ giá trị nào bạn muốn, nhưng bằng cách đặt nó thành chiều rộng thiết bị, nó sẽ điều chỉnh theo giá trị độ rộng pixel của bất kỳ thiết bị nào. "quy mô ban đầu" kiểm soát mức thu phóng ở độ rộng được chỉ định đó.

Answer 3

Dường như hầu hết các trình duyệt di động có xu hướng truyền đạt chiều rộng khung nhìn mặc định rộng hơn đáng kể so với chiều rộng của thiết bị di động. Ví dụ: iOS Safari giả định trang web rộng 980px và thu nhỏ để vừa với toàn bộ lô trong iPhone 4 320px (https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972) có sẵn. Trình duyệt Android có xu hướng thích ứng với chiều rộng từ 800 đến 1024 pixel CSS().

Chiều rộng dự kiến ​​dường như được truyền đạt trước khi thẻ meta được triển khai và vì vậy trong một số trường hợp, thiết lập chiều rộng thành chiều rộng của thiết bị có vẻ như được xem là phóng to. Trừ khi css trên trang của bạn sử dụng phương tiện truyền thông truy vấn để thích ứng với chiều rộng thực tế của thiết bị, nó là tốt hơn trong quan điểm của tôi để tránh mất phần 'width = device-width' của giá trị, và chỉ cần thiết lập các ràng buộc khác mà bạn đang sau.