Meta Viewport標記不縮放頁面

Question

我正在爲iPad訪問者開發一個頁面，但元視口標記似乎沒有工作。我正在使用以下標記

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

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

我已經嘗試了許多視口元標記的排列，但似乎沒有任何技巧。 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 
}