視口的用途

Question

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

把這個元標記放到標題上究竟發生了什麼？

Answer 1

Mobile Safari引入了「視口元標記」，讓Web開發人員控制視口的大小和比例。

使用視口元標記來改善您的網頁內容的展示。通常，您使用視口元標記來設置視口的寬度和初始縮放比例。例如，如果您的網頁的格式爲 窄於980像素，那麼您應該設置 視口的寬度以適合您的網頁內容。如果您正在設計手機或 平板電腦觸摸特定的Web應用程序，請將寬度設置爲設備的寬度 。

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

width屬性控制視口的大小。它可以設置爲 特定數量的像素，例如width = 600或特殊值 設備寬度，它是CSS像素中屏幕寬度爲 的屏幕寬度爲100％。 （有對應的高度和器件的高度值， 其可以用於基於視口高度改變大小或 位置元件的頁面是有用的。）當所述頁面是

初始規模屬性控制縮放級別首先加載了 。最大規模，最小規模和用戶可擴展屬性控制着用戶如何放大或縮小頁面的方式。

來源： - MDN，developer.apple

Answer 2

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

一個<meta>視元素對如何 控制瀏覽器的說明頁面的尺寸和比例。

width=device-width部分設置頁面的寬度，以遵循設備的屏幕寬度（根據設備的不同而不同）。

當瀏覽器首次加載頁面 時，initial-scale=1.0部分設置初始縮放級別。

該代碼僅影響移動瀏覽器上的視圖。你可以看到移動瀏覽器的差異。

如果您將該代碼放入標題中，則在任何移動瀏覽器上的視圖都不會像桌面視圖一樣。但視圖會根據您的設備寬度而改變。