元视口标签不缩放页面

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。

我已经尝试了多种视口元标记排列方式，但 none 似乎可以解决问题。 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
}