Ipad的水平宽度问题

Question

我正在构建一个网站的移动优化版本，并测试不同的移动设备，但我似乎想不出如何让这个页面不超过ipad的水平宽度。

http://www.iirusa.com/upload/wysiwyg/2011-P-Div/P1656/Mobile_web/home.html

这就是我正在构建的页面。只是为了澄清一下，在Ipad上，垂直视图非常适合。但在水平视图中，它会扩展到超出宽度，用户必须收缩它才能查看整个页面。我使用的是100%的宽度容器，我想这就是问题所在，但如何在不影响垂直视图宽度的情况下使水平视图更小呢？

提前感谢你的帮助！！

Answer 1

@SERIK；首先在meta tag中定义viewport。就像这样。

<meta name="viewport" content="user-scalable=no, width=device-width" />

有关更多信息，请参阅这些链接的http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes、http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm、http://thomasmaier.me/blog/2010/03/04/howto-css-for-the-ipad/

Answer 2

你有没有试过在手机上使用viewport元标签？

Answer 3

您可以简单地将此代码添加到页面模板html：

<meta name = "viewport" content = "width = device-width">

在Safari Developer Library中查看更多详细信息