【发布时间】：2010-01-23 03:41:24
【问题描述】：
如何开始开发一个可以通过手机浏览的网站？例如，如果您使用 iPhone 浏览 Gmail 网站，则该网站看起来与普通网站不同。你必须设计两个不同的网站来做到这一点？我如何知道该网站是否被移动浏览器访问？
【问题讨论】：
标签： web cross-browser
【发布时间】：2010-01-23 03:41:24
【问题描述】：
您不必设计两个不同的网站，但如果让移动用户访问您的网站很重要，您可能想要这样做。
有几种方法可以解决这个问题，每种方法都各有利弊。我假设您的网站在数据库中有其信息，并使用一组模板发布该数据？ （例如 Ruby on Rails 或 Django 站点；PHP 站点；博客等）如果您手动编写了一堆静态 HTML 页面，这对您来说将是更加劳动密集型的。
1：相同的 HTML，屏幕和移动的不同样式表
想法：您为所有请求提供相同的 HTML 结构。您为 SCREEN 创建一个样式表，为 MOBILE 创建一个样式表。
很好：对于你，程序员。维护 2 个样式表比维护 2 个完全独立的模板站点更容易。
不好：对您的用户而言。一个易于在移动设备上使用的网站通常对于普通浏览器来说效率低下；为台式机/笔记本电脑优化的网站通常在移动设备上失败。显然，这取决于您如何对页面进行编码，但在大多数情况下，将您的普通网站推送到移动浏览器对您的用户不利。 （请参阅 http://www.useit.com/alertbox/mobile-usability.html，了解 Jakob Nielsen 最近对移动网站的可用性研究的摘要。）
2：维护单独的站点
（Gmail 维护甚至超过 2 个系统！它们基本上有不同的容器应用程序/模板来处理相同的数据：完整的 AJAX 浏览器版本；纯 HTML 浏览器版本；基本的移动版本；原生黑莓应用程序；以及原生 iPhone 应用程序。）
对于真正关心同时拥有移动设备和桌面设备的网站来说，这是新兴的标准。这对您来说工作量更大，但总的来说对您的用户来说要好得多。
从好的方面来说，您可能可以创建一个精简的纯 HTML 网站，该网站适用于移动设备，并且可以作为少数没有 javascript 或存在主要可访问性问题而无法使用的网络用户的后备方案“完整”网站。
另外，取决于您的用户群：在美国，人们通常可以使用台式机/笔记本电脑，并使用他们的移动设备进行辅助访问。例如，我使用台式电脑预订机票和租车，但我想在手机上查找预订代码。在许多情况下，您可以避免限制您在移动网站上提供的功能，并要求使用完整的计算机来执行不常见的用例。
基本流程：
- 为移动设备和屏幕设计和构建 UI。
- 在两个不同的 URL 上启动站点；新兴的约定是桌面版的 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：“专门针对手机的网站，例如 NTT DoCoMo 的 I-Mode 或 Vodafone 的 Vodafone Live! 门户网站，通常严重依赖用户代理嗅探，因为移动浏览器之间通常存在很大差异。手机浏览是近几年才出现的，而很多不具备这些新技术的老款手机仍然在大量使用，因此手机门户网站往往会根据浏览手机的不同，生成完全不同的标记代码。可以很小（例如，调整某些图像的大小以适应较小的屏幕），也可以非常广泛（例如，用 WML 而不是 XHTML 呈现页面）。”
- 在 m.yoursite.com 上，提供指向 www.yoursite.com 的链接。不应将单击此链接的用户重定向回移动网站，您如何完成此操作取决于您的实施。
您可能想关注Quirksmode，了解他关于移动测试的新兴文章。
3：模板根据用户代理输出不同的数据块，并维护单独的样式表
与 (2) 一样，这需要您嗅探用户代理。与 (2) 不同，您仍然使用所有相同的页面逻辑，并且不必维护两个单独的站点。如果您只是在处理主要是关于读取数据的博客或网站，这可能没问题。
在你的模板代码中，你可以这样说
if( $useragentType != mobile ) {
echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}
这让您主要维护一组模板文件。您还可以简化发送给移动用户的页面，这样他们就不会在只想阅读您的博客文章或其他内容时得到一个臃肿的页面。
【讨论】：
如今，大多数移动设备都支持“移动样式表”，它们只是用于更简单地显示内容的替代样式表。您可以以正常方式将移动样式表添加到您的网站，并包含 media="handheld" 属性：
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
然后这些样式将应用于手机。
这种方法的唯一问题是，如果您的 HTML 很庞大，页面加载可能需要一段时间，因为大多数移动浏览器速度较慢（Opera Mini 除外）。这就是 flickr 和 digg 等大型网站使用不同网站的原因。
补充说明：
- 庞大的 HTML 对 Opera Mini 的影响不大，因为它使用代理在外部进行渲染，然后将特殊的“图像”发送到设备。
- 使用简单、干净的 HTML，然后您可以将其发送到普通浏览器和移动设备
- 您必须检查样式表与
media属性的组合。 IIRC 添加上面的代码将使浏览器忽略第一个样式表。如果您将media="all"添加到第一个，两者都将被使用（因此您可以覆盖原始样式而不是重新开始）。
【讨论】：
要检查网页在移动浏览器中的外观，请使用Opera Mini Emulator
【讨论】：
-
在常规 Opera 中，您可以使用视图 > 小屏幕。它看起来很像 Opera Mini，但在 CSS 和 JavaScript 行为方面可能存在细微差别。
【讨论】：
保持简单，想想opera mini，你会做对的。 （iPhone 有更多的普通浏览器......）
关注内容
避免使用插件
遵循网络标准
将内容与布局/设计分开，尽可能多地使用 css。
使用文字和图片。
如果需要，请添加其余的花里胡哨，但请确保网站内容始终可用，即使在关闭花里胡哨的情况下也是如此。 如果您可以使用像 lynx 这样的简单浏览器和像 firefox 这样的普通浏览器来浏览页面，那么您就在正确的轨道上。
欲了解更多信息，请随时访问any browser campaign
编辑：如果您对不同类型的浏览器使用不同的 css 并不明显，但始终使用相同的内容。 访问css zen garden 以获得精彩的演示。
更新： 添加指向 css 媒体类型的链接，正如其他人所说，这是有趣的手持选项。
【讨论】：
您必须设计两个不同的网站才能做到这一点？
是的
我如何知道网站是否被移动浏览器访问？
您的编程语言可能具有某种查看客户信息的方式。例如，PHP 有一个超全局变量$_SERVER，其中包含服务服务器和访问客户端的各种信息。在这种情况下，您会对$_SERVER['HTTP_USER_AGENT'] 的值感兴趣，如果我访问一个页面，它会给出以下结果：
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
这告诉您我正在使用 Safari 4.0 运行 Mac OS X 10.5.6。各种移动浏览器都有已知的关键字。例如，iPhone 浏览器的一个版本具有以下用户代理：
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
“iPhone”已经放弃了它，但关键字“Mobile”和“Safari”进一步证实了这一点
【讨论】：
大多数网站的移动网站子域略有不同（大多数使用“m”）。例如flickr 使用 m.flickr.com
（有人建议使用.mobi TLD，但我从未见过使用过）
让设计超级简单，不要使用太多的图形，你需要让它们尽可能小。 This 可能对设计有所帮助。
我可能会为移动用户构建一组不同的页面，使用与主站点相同的业务对象等。
如果这两个景点的设计差异不是很大，您也许可以通过提供单独的 CSS 文件找到一种方法？
【讨论】：
您的网站应限制在可以支持最大要求的手机上。你甚至不能招待所有的mobile phone。
你的网站应该有不同的css样式集，并且HTTP AGENT必须根据请求检查客户端类型应该进行css选择。
【讨论】：