移动网站看起来不像移动网站

Question

我是Jquery的移动网站的新手，但我使用Jquery制作了这个移动网站。但当我在我的iPhone4s上查看它时，它不能像移动网站那样正常加载。相反，它看起来像是一个遥远的桌面站点。有没有人能告诉我我做错了什么，以及如何改正？

你可以在这里找到这个网站：http://www.rodgersgroupllc.com/mobile/

谢谢,

弗兰克

Answer 1

您唯一缺少的是视口缩放的meta标记。

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

除此之外，一切都很好。

看看这个JS书签，看看你的设计在iphone或其他移动设备上会是什么样子：

http://responsive.victorcoulon.fr/

对于iPhone分辨率，可以在这里找到分辨率：iPhone resoltions，请注意，尽管iPhone4的实际分辨率，像素密度是两倍，所以分辨率是一半。

Answer 2

尝试将此行添加到您的head标记：

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

这会将视口设置为正常比例。大多数移动浏览器默认缩放页面。

width属性设置为device-width，强制窗口的宽度与设备宽度的大小相同(doh!)。initial-scale设置浏览器打开页面时的缩放比例。最后，maximum-scale=1不允许用户缩小。

有关更多信息，请访问：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag