来自Wikipedia's article on user agent sniffing："Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."
8 回答
您无需设计两个不同的站点，但您可能希望让移动用户访问您的站点非常重要 .
有几种方法可以解决这个问题，每种方法都有利有弊 . 我假设您的网站在数据库中有其信息，并使用一组模板发布该数据？ （就像Ruby on Rails或Django站点; PHP站点;博客;等等）如果你手工编写了一堆静态HTML页面，那么对你来说这将是一个更加劳动密集的方式 .
1: Same HTML, different stylesheets for SCREEN and MOBILE
想法：您为所有请求提供相同的HTML结构 . 您为SCREEN创建样式表，为MOBILE创建一个样式表 .
好：对你来说，程序员 . 维护2个样式表比维护2个完全独立的模板站点更容易 .
不好：为您的用户 . 在移动设备上易于使用的站点通常对普通浏览器来说效率低下;针对台式机/笔记本电脑优化的网站经常在移动设备上惨遭失败 . 显然，这取决于您对网页进行编码的方式，但在大多数情况下，将普通网站推送到移动浏览器对您的用户来说都是不利的 . （有关Jakob Nielsen最近在移动网站上的可用性研究的摘要，请参阅http://www.useit.com/alertbox/mobile-usability.html . ）
2: Maintain separate sites
（Gmail维护的系统超过2个！它们基本上有不同的容器应用程序/模板来处理相同的数据：完整的AJAX浏览器版本;纯HTML浏览器版本;基本移动版本;原生黑莓应用程序;以及本机iPhone应用程序 . ）
这是真正关心移动和桌面存在的网站的新兴标准 . 这对你来说更有用，但总的来说它对你的用户来说要好得多 .
从好的方面来说，你可以创建一个适用于移动设备的简化纯HTML网站，它可以作为没有javascript的稀有网络用户的后备，或者具有阻止他们使用“完整”的主要辅助功能问题“网站 .
此外，根据您的用户群：在美国，人们通常可以访问台式机/笔记本电脑，并使用他们的移动设备进行辅助访问 . 例如，我使用台式电脑预订机票和租车，但我想在手机上查看我的预订代码 . 在许多情况下，您可以放弃限制在移动站点上提供的功能，并要求完整的计算机执行不常见的用例 .
基本程序：
设计和构建移动和屏幕用户界面 .
以两个不同的URL启动网站;新兴的 Session 是桌面版的www.yoursite.com，移动版的m.yoursite.com . （如果用户知道约定，则允许用户直接浏览m.yoursite.com . ）
在www.yoursite.com上，嗅探用户代理并测试用户的浏览器是否可移动 . 如果是这样，请将用户定向到m.yoursite.com .
有些嗅探器用各种服务器语言（PHP，Perl等）编写，你可以使用它们 . 检查许可证 . Here's an example of a sniffer written in php .
来自Wikipedia's article on user agent sniffing："Websites specifically targeted towards mobile phones, like NTT DoCoMo's I-Mode or Vodafone's Vodafone Live! portals, often rely heavily on user agent sniffing, since mobile browsers often differ greatly from each other. Many developments in mobile browsing have been made in the last few years, while many older phones that do not possess these new technologies are still heavily used. Therefore, mobile webportals will often generate completely different markup code depending on the mobile phone used to browse them. These differences can be small (e.g. resizing of certain images to fit smaller screens), or quite extensive (e.g. rendering of the page in WML instead of XHTML)."
在m.yoursite.com上，提供返回www.yoursite.com的链接 . 不应将点击此链接的用户重定向回移动网站，如何完成此操作取决于您的实施 .
您可能希望关注Quirksmode，了解他关于移动测试的新文章 .
3: Templates output different data chunks depending on the user-agent, and maintain separate stylesheets
与（2）类似，这需要您嗅探用户代理 . 与（2）不同，您仍然使用所有相同的页面逻辑，而不必维护两个单独的站点 . 如果您只是处理主要是阅读数据的博客或网站，这可能没问题 .
在您的模板代码中，您可以说出类似的内容
这使您可以主要维护一组模板文件 . 您还可以简化您发送给移动用户的页面，这样当他们只是想阅读您的博客文章或其他内容时，他们就不会获得大页面 .
如今，大多数移动设备都支持"mobile stylesheets"，它们只是简单的替代样式表来显示事物 . 您可以按正常方式向网站添加移动样式表，并包含
media="handheld"属性：那些样式将适用于手机 .
这种方法的唯一问题是，如果你的HTML体积庞大，可能需要一段时间才能加载页面，因为大多数移动浏览器都比较慢（Opera Mini除外） . 这就是为什么像flickr和digg这样的大型网站使用不同的网站 .
补充说明：
庞大的HTML不会影响Opera Mini，因为它使用代理从外部进行渲染，然后向设备发送特殊的"image" .
使用简单，干净的HTML，然后您可以将其发送到普通的浏览器和移动设备设备
您必须检查具有
media属性的样式表组合 . IIRC添加上面的代码将使浏览器忽略第一个样式表 . 如果将media="all"添加到第一个，将使用两者（因此您可以覆盖原始样式而不是重新开始） .要检查移动浏览器中weppage的外观，请使用Opera Mini Emulator
查看WURFL项目 . 它的目的是帮助开发人员定位多个手机浏览器，并在开始使用Mobile Safari之前重新开始，早在HDML，WAP和XHTML-MP时代 . 它有点值得关注 . Here's使用WURFL的网站列表 .
另一个由Luca Passani（WURFL的联合创始人和维护者）撰写的相关项目是Switcher . 您可以使用此功能自动重定向到您网站的移动版本 .
保持简单，想想opera mini，你会做对的 . （iPhone有更多正常的浏览器......）
专注于内容
避免插件
遵循网络标准
将内容与布局/设计分开，尽可能使用css .
使用文字和图片 .
如果必须的话，添加其余的铃声和口哨声，但要确保即使关闭铃声和口哨声，网站内容始终可用 . 如果您可以使用像lynx这样的简单浏览器和像firefox这样的普通浏览器浏览页面，那么您就是在正确的轨道上 .
欲了解更多信息，请随时访问any browser campaign
编辑：如果不是很明显你使用不同类型的浏览器的不同CSS，但总是使用相同的内容 . 访问css zen garden进行一个很好的演示 .
更新：添加到css媒体类型的链接，并且如其他人所述，手持选项很有趣 .
是
您的编程语言可能有某种方式来查看客户端的信息 . 例如，PHP有一个超全局变量
$_SERVER，它具有服务服务器和访问客户端的各种信息 . 在这种情况下，如果我访问页面，您会对$_SERVER['HTTP_USER_AGENT']的值感兴趣，这会产生以下结果：这告诉你我正在使用Safari 4.0运行Mac OS X 10.5.6 . 存在用于各种移动浏览器的已知关键字 . 例如，iPhone的一个版本的浏览器具有以下用户代理：
“iPhone”已经放弃了，但关键词“手机”和“Safari”进一步证实了这一点
大多数网站的移动网站子域略有不同（大多数使用"m"） . 例如flickr使用m.flickr.com
（建议使用.mobi TLD，但我从未见过使用过的）
使设计变得非常简单，不要使用太多的图形，您需要尽可能地保持它们 . This可能对设计有所帮助 .
我可能会为移动用户构建一组不同的页面，使用与主站点相同的业务对象等 .
如果两个景点的设计之间的差异不是很大，那么你可以通过提供单独的CSS文件来获得一种方法吗？
您的网站应该限制在可满足最高要求的移动电话上 . 你甚至无法招待所有mobile phone .
您的网站应具有不同的css样式集，并且HTTP AGENT必须根据Css选择应发生的请求检查客户端类型 .