html - 创建网站的简单移动版本的最佳方法是什么？

Question

我正在为一家公司构建一个小型网站，并希望构建一个针对具有完整互联网浏览器的智能手机(iPhone/Android 等)优化的版本。

我倾向于媒体查询，因为这是由大多数似乎使用的 webkit 支持的。

这是最好的吗？如果是这样，哪种媒体查询最好？

我倾向于:

@media (max-device-width: 480px)

Answer 1

如果您的网站可以通过 CSS 调整您需要的一切，那您应该不错。

请记住移动网络中的不同之处:

• 整体宽度/高度小得多
• 为了便于阅读，字体大小通常会变大
• 许多设备都不支持 Flash(咳嗽 iphone)
• 剥离任何不需要的东西 不要在移动用户不关心的事情上浪费带宽
• 为电话号码添加适合移动设备的属性以便于拨号

也就是说，一旦您开始使用它，您可能会发现您确实想要/需要为移动用户提供不同的“ View ”...例如将它们从 example.com 重定向到 m.example.com 并显着改变页面上的内容。如果您使用类似 MVC 的框架，您应该能够为您的页面制作一组针对移动设备优化的简化 View 。

示例网站(桌面版、移动版、触摸优化版)

• Digg:Full | Mobile
• 雅虎:Full | Mobile
• Facebook :Full | Mobile | Touch