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。

我尝试了很多视口元标记的排列，但似乎都没有。 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
}