移动设计CSS？

Question

我试图通过使用不同的样式表制作我的第一个移动网站，但我注意到它比我预期的要复杂。当我测试我的iPhone 4S和我妻子的机器人时，一切都非常不同。我需要用什么来使它像Facebook的移动网站？你无法放大或缩小的地方，它只能放在你的屏幕上？

Answer 1

为了确保您的网页不需要被放大，加在你的HTML以下meta标签：

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

它执行以下操作：视口的

• 宽度缩放到您设备的宽度（width=device-width）
• 初始和最大比例设置为1.0
• 用户s如果你正在寻找方法，让您的网站顺利移动设备的正常工作，平板电脑和桌面设备caling（缩放）被禁用

，关键词是响应式设计（或响应网页设计）。阅读this article on A List Apart开始。对于一个非常流行的（非常类似Facebook的）响应式布局，请参阅Twitter Bootstrap。对于高度移动优化的用户界面组件，我真的建议看看jQuery Mobile。

Answer 2

看看苹果的文档Safari Developer Library。基本上你需要使用meta标签来告诉浏览器你的网站是移动的。您也可以使用这些标签自定义缩放缩放样式和内容。

具体来说，你想

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

也许应该注意到，一些在Safari开发库描述的东西只能在iOS设备上运行。不过，上面的代码应该可以在Android和iOS上使用。