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

【问题标题】：Best practice for detecting and formatting for mobile browsers检测和格式化移动浏览器的最佳实践
【发布时间】：2011-07-08 11:56:42
【问题描述】：

我为希望从移动设备轻松访问它的客户托管了一个小型网上商店。

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

当我这样做后，我应该：

检查用户是否有移动设备，然后将其转发到另一个网站？我认为优点是：
- 我可以针对屏幕尺寸优化两个站点的布局
- 我可以在两个站点中使用不同的技术（例如，jquery mobile for mobile）
针对不同的屏幕尺寸使用 CSS => 就像 tutsplus 我认为优点是：
- 我只需要一个网站，但在我看来，在谈论一个小型网上商店时，工作量很大

【问题讨论】：

Detecting a mobile browser的可能重复

标签： mobile web jquery-mobile

【解决方案1】：

理想情况下，您应该尝试将 jQuery Mobile 页面结构与您自己的 CSS 和 JavaScript 一起用于非移动设备。

您可以轻松地detect user's browser 和条件脚本包括按照 html5 [boilerplate]: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 用户的主要考虑事项：

确保没有重要的闪光物体在页面上，因为它不受许多移动浏览器（还没有？）
合适的屏幕尺寸（使用视口元标记）
记住没有鼠标游标，表示没有悬停/双击可用鼠标拖动手势不同在触控设备上
记住所有弹出窗口都是以新的方式打开的选项卡并且不会同时显示时间作为主窗口，使用 javascript 模态 div 作为替代
测试你所有的 javascript 和 css 确保一切看起来和工作正常相同（Safari 需要 -webkit- 前缀获取最新的 CSS 属性）
为您的网站（很高兴拥有）

大部分这些东西都涵盖了here

查看Safari Dev Center 以获取教程/视频/编码方法等。

【讨论】：

【解决方案2】：

有几种选择，但这是我最喜欢的：

http://code.google.com/p/mobileesp/

还附带多种不同语言的 API

【讨论】：

【解决方案3】：

如果您不想使用 jQuery，则根本不需要它。我们没有。并不是说这有什么问题。

2 号是最佳选择。如果您首先考虑到移动设备来创建网站，那么在桌面上扩展和操作比尝试将内容缩小到移动屏幕上要容易得多。

【讨论】：

jQuery (mobile) 只是一个例子。在我看来，浏览移动设备时会有不同的用户体验。因此，您将从移动设备网站开始，如果用户的屏幕宽度大于 480 像素，则更改格式

【解决方案4】：

JQuery Mobile 目前处于 beta 1 阶段。 Beta 2 将在一个月内发布。目前它相当稳定，您可以从他们那里获得很多关于什么被认为是“最佳实践”的知识。您可以对 JQuery Mobile 也支持的不同平台的屏幕尺寸使用媒体查询。

http://jquerymobile.com/

【讨论】：