width =設備寬度是否與初始比例= 1一致？

Question

研究視口行為，我在理解元視口聲明時遇到了一些障礙。

我看到width=device-width和initial-scale=1一起使用很多，但據我所知，后者暗示前者。

MDN還提到，定義width和initial-scale=1將導致寬度作為最小視口寬度。 如果是這種情況，那么是否需要將寬度定義為device-width ？ 當然，任何布局視口小於設備寬度的初始比例都不能為1。

我錯過了什么或者將寬度定義為設備寬度冗余嗎？

謝謝

Answer 1

使用width=device-width和initial-scale=1確保跨瀏覽器/設備兼容性。 例如，對於iOS設備，頁面需要initial-scale=1來獲取設備的方向更改，因為width=device-width不會。 使用兩者都可以使用元視口標記確保最大效果。

Answer 2

2個標簽不一樣。

' width=device '標簽告訴瀏覽器將設備的實際寬度用作屏幕的100％寬度。 如果省略它，移動設備將模擬它具有更高的分辨率，並且您的內容不會被拉伸到全寬。

initial-scale是第一次加載時的縮放級別。 如果它設置為1，同時設置為' width=device '，則內容將不會縮小或縮小。您也無法縮小超過初始比例（但您仍然可以放大）。 這就好像你將'minimum-scale'設置為1。

還有一個“ maximum-scale ”，如果你也設置為1，用戶將無法放大超過初始比例。

這是一個如何創建“類似app”的感覺的示例，其中內容以1：1的比例使用設備的寬度。

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

希望這可以幫助！