Chế độ xem trực quan so với chế độ xem Bố cục trên thiết bị di động

Question

Tôi vừa đọc một số nice article on viewport để lại cho tôi một số câu hỏi liên quan đến chế độ xem Hình ảnh và chế độ xem Bố cục trên thiết bị di động.

chiều rộng và chiều cao của khung nhìn bố trí đều bình đẳng để bất cứ điều gì có thể được hiển thị trên màn hình ở chế độ tối đa thu nhỏ

tôi không hoàn toàn hiểu điều đó có nghĩa. Khi họ nói "chế độ thu phóng tối đa", điều đó có nghĩa là chế độ xem bố cục khác với các HTML khác nhau (và không cụ thể cho các thiết bị khác nhau như iPad, Xoom, v.v ...)?

Thứ hai, tôi đã tạo một demo page để đo hai chế độ xem này. (Vui lòng xem điều này trên iPhone/iPad để có được giá trị chính xác.)

Tôi hiểu rằng chế độ xem bố cục có thể được thay đổi bằng cách đặt thẻ chế độ xem meta, nhưng cũng thay đổi chế độ xem trực quan - tại sao ? Nó nói rằng chế độ xem trực quan là một phần của trang hiện được hiển thị trên màn hình, do đó, sự hiểu biết của tôi là chế độ xem trực quan không bị ảnh hưởng bởi cài đặt chế độ xem siêu dữ liệu.

Answer 1

Cả chế độ xem bố cục và chế độ xem trực quan được tính bằng pixel CSS. Đây là một sự khác biệt quan trọng để thực hiện. Trái ngược với các điểm ảnh vật lý trên thiết bị, các pixel CSS được sử dụng để giữ kích thước của nội dung tương đối không đổi và được kiểm soát, sau đó thiết bị dịch các pixel CSS thành các pixel của thiết bị.

Hiểu sự khác biệt giữa pixel CSS và điểm ảnh thiết bị có thể hỗ trợ trong việc hiểu và trả lời các câu hỏi của bạn.

1. Kích thước của chế độ xem bố cục là kích thước ban đầu của nội dung (trong CSS pixel).

   Chế độ xem bố cục được sử dụng để xác định tốt nhất cách định vị và hiển thị nội dung ban đầu. Nó độc lập với mức thu phóng của thiết bị. Bằng cách nói "... bất cứ điều gì có thể được hiển thị trên màn hình ở chế độ phóng to tối đa", tôi nghĩ anh ấy ám chỉ đến kích thước của khung nhìn bố cục không thay đổi; nó sẽ luôn có cùng kích thước, không phân biệt chế độ xem trực quan hiện tại.

2. Chế độ xem hình ảnh chỉ là khu vực có thể xem của trang - một lần nữa, trong CSS pixel. Nếu bạn phóng to trên một trang, bạn sẽ tăng kích thước của CSS pixel, điều này sẽ làm giảm tự nhiên số lượng CSS pixel có thể vừa với thiết bị. Đó là lý do kích thước của chế độ xem trực quan thu nhỏ khi bạn phóng to.

   Chế độ xem hình ảnh không được lớn hơn nội dung trên trang.

   Kích thước của nội dung chủ yếu được quyết định bởi chế độ xem bố cục.

   Kích thước của chế độ xem bố cục được đặt theo quy tắc siêu chế độ xem.

   Do đó, thứ nguyên của chế độ xem trực quan sẽ thay đổi theo phản ứng với các thay đổi trong quy tắc siêu chế độ xem.

---

Bạn có kể từ khi được hỏi (trong ý kiến):

Tại sao nó rằng khi có nội dung đó là một cách rõ ràng rộng hơn cửa sổ bố trí, các khung nhìn hình ảnh được kéo dài để phù hợp với tất cả điều đó trong? Không nên có một thanh cuộn?

Không, vì bạn chỉ cho trình duyệt biết kích thước ban đầu của chế độ xem bố cục nên là gì, không phải là chế độ xem trực quan.

Nếu bạn muốn kích thước của chế độ xem trực quan không điều chỉnh theo chiều rộng đầy đủ của nội dung khi tải trang, hãy đặt thuộc tính initial-scale=1 bên trong khai báo meta-viewport.

---

có một tuyệt vời đọc qua về Trung tâm Dev Mozilla về viewport thẻ meta: https://developer.mozilla.org/en/mobile/viewport_meta_tag