html - 元视口(viewport)标签不缩放页面

Question

我正在为 iPad 访问者开发一个页面，但 meta viewport 标签似乎不起作用。我正在使用以下标签

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

有问题的页面在这里:http://www.ixl.com/files/quia/users/landing_pgs/ipad_ret/page.html .

我已经尝试了视口(viewport)元标记的许多排列，但似乎没有一个能奏效。 Safari 一直呈现比视口(viewport)宽得多的页面。

如有任何见解，我们将不胜感激!

Answer 1

视口(viewport)并不是使网站缩放到查看设备所需的唯一东西。您需要研究媒体查询。您通常会有几个媒体查询，即:移动和平板电脑版本。在媒体查询中，您只会更改需要更改的必要内容的编码。因此，如果您希望只适合页面的大小，只需更改媒体查询中的大小。这里有很多关于媒体查询的内容，请查看。

添加:

你可以像这样格式化它:

"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
}