Meta Viewport標簽無法縮放頁面

Question

我正在為iPad訪問者開發一個頁面，但是meta視口標記似乎不起作用。 我正在使用以下標簽

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

有問題的頁面在這里： http : //www.ixl.com/files/quia/users/landing_pgs/ipad_ret/page.html 。

我已經嘗試了視口meta標簽的許多排列，但似乎沒有辦法解決。 Safari始終將頁面呈現得比視口更寬。

任何見解將不勝感激！

Answer 1

視口不是使網站縮放到所查看設備所需的唯一對象。 您需要調查媒體查詢。 通常，您將有幾個媒體查詢，即：移動版和平板電腦版。 在媒體查詢中，您將僅更改需要更改的必要內容的編碼。 因此，如果您希望僅適合頁面的大小，請僅在媒體查詢中更改大小。 關於媒體查詢，這里有很多內容，請查看。

加上：

您將采用以下格式：

"large" css here

 @media only screen and (max-width:800px)
 {
"medium" css changes here
}

 @media only screen and (max-width:480px)
{
"small" css changes here
}