2

我试图通过使用不同的样式表来制作我的第一个移动网站，但我注意到它比我预期的要复杂。当我测试我的 iPhone 4S 和我妻子的安卓系统时，一切都变得不一样了。我需要用什么使它像 Facebook 的移动网站？在哪里无法放大或缩小，而这一切都只适合您的屏幕？

4

2 回答 2

1

为了确保您的页面不需要缩放，meta请在 HTML 中添加以下标记：

<meta name="viewport"
 content="width=device-width, initial-scale=1.0;
 maximum-scale=1.0; user-scalable=0"></meta>

它执行以下操作：

  • 视口的宽度缩放到您设备的宽度 ( width=device-width)
  • 初始和最大比例设置为1.0
  • 用户缩放（缩放）被禁用

如果您正在寻找让您的网站在移动设备、平板电脑以及桌面设备上顺畅运行的方法，那么关键字就是响应式设计（或响应式网页设计）。阅读A List Apart 上的这篇文章以开始使用。此外，对于非常流行（非常类似于 Facebook）的响应式布局，请参阅Twitter Bootstrap。对于高度移动优化的 UI 组件，我真的建议看看jQuery Mobile。

于 2012-06-20T21:21:37.807 回答
0

查看 Apple 在Safari 开发人员库中的文档。基本上，您需要使用meta标签来告诉浏览器您的网站具有移动功能。您也可以使用这些标签自定义捏缩放样式和内容。

具体来说，你想要

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />

应该注意，Safari 开发者库中描述的一些内容仅适用于 iOS 设备。不过，上面的代码应该可以在 Android 和 iOS 上运行。

于 2012-06-20T21:22:28.807 回答