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

Question

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

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

当我这样做时，我应该:

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

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

2. 针对不同的屏幕尺寸使用 CSS => 就像 tutsplus 一样我认为优点是:

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

Answer 1

理想情况下，您应该尝试使用 jQuery Mobile使用您自己的 CSS 和 JavaScript 为非移动设备构建页面结构。

您可以轻松detect user's browser条件脚本包括按照 html5 [样板]:3

/* 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 用户时需要考虑的主要事项:

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

其中大部分内容都已涵盖 here

看看Safari Dev Center有关教程/视频/编码方法等。