寬度與視口
當我們對媒體查詢使用 width 時，正確設定元標記很重要。基本元標記看起來像這樣，它需要放在 <head> 標籤內。
<meta name="viewport" content="width=device-width,initial-scale=1">
為什麼這很重要？
基於 MDN 的定義寬度是
寬度媒體功能描述輸出裝置的渲染表面的寬度（例如文件視窗的寬度，或印表機上頁面框的寬度）。
那是什麼意思？
View-port 是裝置本身的寬度。如果螢幕解析度顯示解析度為 1280 x 720，則視口寬度為 1280px。
更常見的是，許多裝置分配不同的畫素量以顯示一個畫素。例如，iPhone 6 Plus 的解析度為 1242 x 2208。但實際的視口寬度和視口高度為 414 x 736.這意味著 3 個畫素用於建立 1 個畫素。
但是，如果你沒有正確設定 meta 標籤，它將嘗試以其原始解析度顯示你的網頁，從而導致縮小檢視（較小的文字和影象）。