移动浏览器检测和格式化的最佳实践

我为一位希望可以通过移动设备轻松访问的客户开设了一个小型网上商店。

如何检测用户是否通过移动设备浏览我的网站？

当我这样做之后，我应该：

1. 检查用户是否有移动设备，然后将其转发到另一个站点？ 我认为优点是：

   • 我可以优化两个网站的屏幕尺寸布局
   • 我可以在两个站点中使用不同的技术（例如，jquery mobile for mobile）

2. 对不同的屏幕尺寸使用 CSS => 就像tutsplus http://net.tutsplus.com/tutorials/html-css-techniques/responsive-web-design-a-visual-guide/我认为优点是：

   • 我只需要一个网站，但在我看来，谈论小型网上商店时需要做大量工作

理想情况下，您应该尝试使用jQuery 移动 http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/使用您自己的 CSS 和 JavaScript 为非移动设备设计页面结构。

您可以轻松地检测用户的浏览器 http://detectmobilebrowser.com/条件脚本包括按照 html5 [样板]：3 http://html5boilerplate.com/

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {

针对 iPhone 用户时需要考虑的主要事项：

• 确保没有重要的闪光物体 在页面上，因为它不受支持 许多移动浏览器（还？）
• 适当的屏幕尺寸（使用 视口元标记）
• 请记住没有鼠标 光标，意思是没有 悬停/双击可用 鼠标拖动手势不同 在触摸设备上
• 请记住所有弹出窗口均以新方式打开 选项卡，并且不会同时看到 time 作为主窗口，使用 javascript 模态 div 作为替代
• 测试你所有的 javascript 和 css 确保一切看起来和工作正常 相同（Safari 需要 -webkit- 前缀 最新的 CSS 属性）
• 为您的主屏幕创建一个图标 网站（一个很好的东西）

其中大部分内容都已涵盖here http://developer.apple.com/library/safari/#codinghowtos/Mobile/UserExperience/_index.html

看一眼Safari 开发中心 http://developer.apple.com/devcenter/safari/index.action有关教程/视频/编码方法等。