Các tác dụng phụ của việc loại bỏ chiều rộng của chiều cao = chiều rộng thiết bị khỏi thẻ meta của chế độ xem khi chế độ ban đầu của thang điểm = 1.0.

Mặc dù <meta name="viewport">thẻ không được chuẩn hóa, nhưng nó "được hầu hết các trình duyệt di động tôn trọng do sự thống trị trên thực tế".

Một nhược điểm của nó không phải là một tiêu chuẩn web thực sự là tài liệu chi tiết không có sẵn như các tiêu chuẩn khác. Các Nhóm công tác CSS có một đặc điểm kỹ thuật cho điều này, vì vậy đó là những gì tôi đang chủ yếu sử dụng như một tác phẩm có thẩm quyền.

Câu hỏi chính của tôi là:

Sự khác biệt nhận thức sẽ là gì giữa các tuyên bố sau đây?

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

<meta name="viewport" content="initial-scale=1.0">

Ngoài ra, những điểm khác biệt giữa hai quy tắc @viewport CSS này là gì:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

Làm thế nào tôi đến những @viewportbản dịch đó:

width=device-width đến min-width: extend-to-zoom; max-width: 100vw;

Các CSS Device Thích ứng Mô-đun Level 1 tài liệu trạng thái:

Các thuộc tính widthvà heightkhung nhìn <META>được dịch sang widthvà heightmô tả, đặt min-width/ min-heightvalue thành extend-to-zoomvà giá trị max-width/ max-heighttheo chiều dài từ khung nhìn.

Họ cũng đưa ra một ví dụ :

<META>Yếu tố này :

<meta name="viewport" content="width=500, height=600">

dịch sang:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

Các widthmô tả tốc ký được mô tả như sau:

Đây là một mô tả tốc ký để thiết lập cả hai min-widthvà max-width. Một <viewport-length>giá trị sẽ đặt cả hai min-widthvà max-widthgiá trị đó. Hai <viewport-length>giá trị sẽ được đặt thành min-widthđầu tiên và max-widththứ hai.

Vì vậy, nó đứng cho lý do width: extend-to-zoom 500px;tương đương với min-width: extend-to-zoom; max-width: 500px;.

Điều đó chỉ để lại 100vwmột phần. Trong phần 10,4 , họ giải thích:

device-widthvà device-heightdịch sang 100vw và 100vh tương ứng

Vì vậy, cuối cùng chúng ta có thể thấy làm thế nào width=device-widthđược dịch sang min-width: extend-to-zoom; max-width: 100vw;.

initial-scale=1.0 đến zoom: 1.0; width: extend-to-zoom;

Đây là một ví dụ nguyên văn :

<META>Yếu tố này :

<meta name="viewport" content="initial-scale=1.0">

dịch sang:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

Một câu hỏi khác tôi có ở đây là, những gì chính xác là extend-to-zoomgiá trị?

Các tài liệu về nó và thủ tục giải quyết của nó rất khó để nắm bắt. Nếu bất cứ ai có thể chỉ cho tôi một số ví dụ khác về điều này sẽ được đánh giá rất cao.

Ngoài mọi thứ ở trên, tôi đã kết hợp một trang web nhanh - https://romellem.github.io/temp-site/viewport/ - để kiểm tra một số cấu hình chế độ xem.

Cụ thể là:

• content = "width = chiều rộng thiết bị, scale-scale = 1.0"
• nội dung = "quy mô ban đầu = 1.0"

Điều này có thể giúp kiểm tra.

Trước khi chúng tôi đi sâu vào những gì bạn đang hỏi, hãy xem xét một chút về lý do tại sao viewportthẻ meta tồn tại ở vị trí đầu tiên. Đây là những gì tôi đã thu thập được.

Tại sao chúng ta cần viewportthẻ?

Một khung nhìn là một khu vực có thể nhìn thấy nội dung web. Thông thường, trang được hiển thị (nội dung web) lớn hơn chế độ xem. Do đó, chúng tôi thường sử dụng thanh cuộn để xem nội dung ẩn (vì chế độ xem không thể hiển thị mọi thứ). Trích dẫn từ Mô-đun thích ứng thiết bị CSS Cấp 1 :

Khung nhìn hẹp là một vấn đề đối với các tài liệu được thiết kế để trông đẹp trong trình duyệt máy tính để bàn. Kết quả là các nhà cung cấp trình duyệt di động sử dụng kích thước khối chứa ban đầu cố định khác với kích thước khung nhìn và gần với kích thước của cửa sổ trình duyệt máy tính để bàn thông thường. Ngoài việc cuộn hoặc xoay, thu phóng thường được sử dụng để thay đổi giữa tổng quan của tài liệu và phóng to các khu vực cụ thể của tài liệu để đọc và tương tác.

Trong các thiết bị di động (và các thiết bị nhỏ hơn khác), khối chứa ban đầu thường lớn hơn chế độ xem. Ví dụ: một thiết bị di động có chiều rộng màn hình 640pxcó thể có khối chứa ban đầu 980px. Trong trường hợp này, khối chứa ban đầu được thu nhỏ lại để 640pxcó thể vừa với màn hình di động. 640pxChiều rộng này (chiều rộng màn hình) là những gì được gọi là initial-widthcủa khung nhìn sẽ phù hợp với cuộc thảo luận của chúng tôi.

Vậy .... Tại sao chúng ta cần viewportthẻ này ? Chà, ngày nay, chúng ta có các truy vấn truyền thông cho phép chúng ta thiết kế cho các thiết bị di động. Tuy nhiên, truy vấn phương tiện này phụ thuộc vào chiều rộng của khung nhìn thực tế . Trong các thiết bị di động, tác nhân người dùng sẽ tự động định kiểu kích thước khung nhìn ban đầu thành một kiểu cố định khác (thường lớn hơn kích thước khung nhìn ban đầu). Vì vậy, nếu độ rộng của chế độ xem của thiết bị di động được cố định, các quy tắc CSS mà chúng tôi sử dụng trong truy vấn phương tiện sẽ không được thực thi đơn giản vì chiều rộng của chế độ xem không bao giờ thay đổi. Sử dụng viewportthẻ, chúng ta có thể kiểm soát những thực tế chiều rộng khung nhìn (sau được phong cách của UA). Trích dẫn từ MDN :

Tuy nhiên, cơ chế này không tốt cho các trang được tối ưu hóa cho màn hình hẹp sử dụng truy vấn phương tiện - ví dụ: nếu chế độ xem ảo là 980px, các truy vấn phương tiện có kích thước 640px hoặc 480px trở xuống sẽ không bao giờ được sử dụng, làm hạn chế tính hiệu quả của kỹ thuật thiết kế đáp ứng.

Lưu ý rằng viewportthẻ cũng có thể thay đổi chiều cao của khung nhìn thực tế, không chỉ chiều rộng

viewport thẻ của width

Các widthtrong một viewportthẻ được phiên dịch sang max-widthtrong @viewportquy tắc. Khi bạn khai báo widthas device-width, nó được dịch 100%theo @viewportquy tắc. Giá trị phần trăm được giải quyết dựa trên initial-widthchế độ xem. Vì vậy, nếu chúng ta vẫn đang sử dụng ví dụ trên, ý max-widthchí sẽ giải quyết thành giá trị 640px. Như bạn đã tìm ra, điều này chỉ xác định max-width. Các min-widthsẽ tự động được extend-to-zoom.

extend-to-zoom

Câu hỏi của bạn là chính xác giá trị của zoom-to-zoom là gì? Từ những gì tôi đã thu thập được, đó là giá trị được sử dụng để hỗ trợ chế độ xem mở rộng để phù hợp với khu vực xem ở mức thu phóng nhất định. Nói cách khác, đó là giá trị kích thước khung nhìn thay đổi dựa trên giá trị thu phóng được chỉ định. Một ví dụ? Cho rằng max-zoomgiá trị của biểu định kiểu UA là 5.0và initial-widthlà 320px, <meta name="viewport" content="width=10">sẽ phân giải thành chiều rộng thực tế ban đầu là 64px. Điều này có ý nghĩa bởi vì nếu một thiết bị chỉ có 320px và chỉ có thể phóng to 5xgiá trị bình thường, thì kích thước khung nhìn tối thiểu sẽ có 320px divided by 5nghĩa là chỉ hiển thị 64px tại một thời điểm ( chứ không phải 10pxbởi vì điều đó sẽ yêu cầu phóng to 32x!). Giá trị này sẽ được thuật toán sử dụng để xác định cách mở rộng (thay đổi) min-widthvà max-widthcác giá trị, sẽ đóng vai trò xác định độ rộng khung nhìn thực tế.

Để tất cả chúng cùng nhau

Vì vậy, về cơ bản, sự khác biệt giữa <meta name="viewport" content="width=device-width, initial-scale=1.0">và <meta name="viewport" content="initial-scale=1.0">? Đơn giản chỉ cần làm lại các bước của thuật toán ( cái này và cái này ). Trước tiên hãy làm cái sau (cái không có widththuộc tính) trước. (Chúng tôi sẽ giả định rằng initial-widthchế độ xem là 640px.)

• widthkhông được đặt, điều này dẫn đến max-widthvà min-widthnằm extend-to-zoomtrong @viewportquy tắc.
• initial-scalelà 1.0. Điều này có nghĩa là zoomgiá trị cũng1.0
• Hãy giải quyếtextend-to-zoom . Các bước:
  1. extend-zoom = MIN(zoom, max-zoom). Các MINhoạt động giải quyết đến giá trị không auto. Đây, zoomlà 1.0và max-zoomlà auto. Điều này có nghĩa extend-zoomlà1.0
  2. extend-width = initial-width / extend-zoom. Điều này thật dễ dàng; chia 640 cho 1. Bạn nhận extend-widthđược bằng640
  3. Bởi vì extend-zoomkhông phải auto, chúng tôi sẽ bỏ qua điều kiện thứ hai. max-widththực sự extend-to-zoom, điều này có nghĩa là max-widthsẽ được đặt thành extend-width. Như vậymax-width = 640
  4. min-widthcũng vậy extend-to-zoom, điều này có nghĩa là thiết lập min-widthđể max-width. Chúng tôi nhận đượcmin-width = 640
• Sau khi giải quyết cácautoextend-to-zoom giá trị không (tức là ) cho max-widthvà min-width. Chúng ta có thể tiến hành các thủ tục tiếp theo . Bởi vì min-widthhoặc max-widthkhông auto, chúng ta sẽ sử dụng cái đầu tiên iftrong thủ tục, do đó đặt chế độ xem thực tế ban đầu widththành MAX(min-width, MIN(max-width, initial-width)), tương đương với MAX(640, MIN(640, 640)). Điều này giải quyết 640cho chế độ xem thực tế ban đầu của bạnwidth
• Chuyển sang thủ tục tiếp theo . Trong bước này, widthkhông auto. Giá trị không thay đổi và chúng tôi kết thúc với chế độ xem thực tế widthcủa640px

Hãy làm trước đây.

• widthđược thiết lập, kết quả này max-widthlà 100%( 640pxtrong trường hợp của chúng tôi) và min-widthnằm extend-to-zoomtrong @viewportquy tắc.
• initial-scalelà 1.0. Điều này có nghĩa là zoomgiá trị cũng1.0
• Hãy giải quyếtextend-to-zoom . Nếu bạn làm theo các bước một cách cẩn thận (gần như tương tự như trên), bạn sẽ kết thúc với một max-widthsố 640pxvà một min-widthcủa 640px.
• Bạn có thể có thể nhìn thấy mô hình bây giờ. Chúng tôi sẽ nhận được chiều rộng khung nhìn thực tế của 640px.

Vì vậy, sự khác biệt nhận thức là gì? Thực chất là không có . Cả hai đều làm điều tương tự. Hy vọng lời giải thích của tôi sẽ giúp ;-) Nếu có gì không ổn, hãy nói cho tôi biết.