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 
}