Question

如何开始开发可以从手机浏览的网站？例如，如果您从iPhone浏览Gmail网站，该网站看起来与普通网站不同。你必须设计两个不同的网站来做到这一点？如何知道移动浏览器是否访问该网站？

Answer 1

您无需设计两个不同的网站，但您可能希望移动用户访问您的网站非常重要。

有几种方法可以解决这个问题，每种方法都有利有弊。我假设您的网站在数据库中有自己的信息，并使用一组模板发布该数据？（就像Ruby on Rails或Django站点; PHP站点;博客等;）如果你手工编写了一堆静态HTML页面，那么对你来说这将是更加劳动密集的。

1：相同的HTML，不同的SCREEN和MOBILE样式表

这个想法：您为所有请求提供相同的HTML结构。您为SCREEN创建样式表，为MOBILE创建一个样式表。

好：对你来说，程序员。维护2个样式表比维护2个完全独立的模板站点更容易。

糟糕：对于您的用户。在移动设备上易于使用的站点通常对普通浏览器来说效率低下;针对台式机/笔记本电脑优化的网站经常在移动设备上惨遭失败。显然，这取决于您对页面进行编码的方式，但在大多数情况下，将普通网站推送到移动浏览器对您的用户来说将是不利的。（有关Jakob Nielsen最近在移动网站上的可用性研究的摘要，请参阅http://www.useit.com/alertbox/mobile-usability.html。）

2：维护单独的网站

（Gmail维护的系统超过2个！它们基本上有不同的容器应用程序/模板来处理相同的数据：完整的AJAX浏览器版本;纯HTML浏览器版本;基本移动版本;原生黑莓应用程序;以及原生iPhone应用程序。）

这是真正关心移动和桌面存在的网站的新兴标准。这对你来说更有用，但总的来说它对你的用户来说要好得多。

从好的方面来说，你可以创建一个适用于移动设备的简化纯HTML网站，它可以作为没有javascript的罕见网络用户的后备，或者是那些阻止他们使用的主要辅助功能问题“完整”的网站。

此外，根据您的用户群：在美国，人们通常可以访问台式机/笔记本电脑，并使用他们的移动设备进行辅助访问。例如，我使用台式电脑预订机票和租车，但我想在手机上查看我的预订代码。在许多情况下，您可以放弃限制在移动站点上提供的功能，并要求完整的计算机执行不常见的用例。

基本程序：

设计＆amp;为移动和屏幕构建UI。
以两个不同的网址启动网站;新兴的会议是桌面版的www.yoursite.com，移动版的m.yoursite.com。（如果用户知道约定，则允许用户直接浏览m.yoursite.com。）
在www.yoursite.com上，嗅探用户代理并测试用户的浏览器是否可移动。如果是这样，请将用户定向到m.yoursite.com。
1. 您可以使用各种服务器语言（PHP，Perl等）编写的嗅探器。检查许可证。 Here's an example of a sniffer written in php。
2. 来自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' );
}

这使您可以主要维护一组模板文件。您还可以简化您发送给移动用户的页面，这样当他们只是想阅读您的博客文章或其他任何内容时，他们就不会获得大页面。

Answer 2

如今，大多数移动设备都支持“移动样式表”，这些样式表只是简单的替代样式表。您可以按正常方式向网站添加移动样式表，并添加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"添加到第一个，将使用它们（因此您可以覆盖原始样式而不是重新开始）。

Answer 3

保持简单，想一想opera mini，你就会做对。（iPhone有更多正常的浏览器......）

专注于内容
避免使用插件
遵循网络标准
将内容与布局/设计分开，尽可能使用css。
使用文字和图片。

如果必须的话，添加其余的铃声和口哨声，但要确保即使关闭铃声和口哨声，网站内容始终可用。如果您可以使用像lynx这样的简单浏览器和像firefox这样的普通浏览器浏览页面，那么您就是在正确的轨道上。

如需了解更多信息，请随时访问any browser campaign

编辑：如果不明显您使用不同类型的浏览器使用不同的CSS，但始终使用相同的内容。访问css zen garden获取一个不错的演示。

更新：添加到css媒体类型的链接，并且如其他人所说，手持选项很有趣。

http://www.w3.org/TR/CSS21/media.html

Answer 4

要检查网页在移动浏览器中的显示方式，请使用Opera Mini Emulator

Answer 5

查看WURFL项目。它的目的是帮助开发人员定位多个手机浏览器，并在HD Safari，WAP和XHTML-MP时代开始回归Mobile Safari之前。然而，它是最新的，存储iPhone等现代设备的功能。它拥有超过400种设备的数据，并具有Java，PHP，Perl，Ruby，Python，.NET，C ++库。根据您希望定位移动应用程序的广度，可以查看。 Here's使用WURFL的网站列表。

由Luca Passani（WURFL的联合创始人和维护者）撰写的另一个相关项目是Switcher。您可以使用此功能自动重定向到您网站的移动版本。

Answer 6

你必须设计两个不同的站点才能做到这一点吗？

是

我如何知道移动浏览器是否访问该网站？

您的编程语言可能有某种方式来查看客户的信息。例如，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”已经放弃了，但关键词“移动”和“Safari”进一步证实了

Answer 7

大多数网站的移动网站子域略有不同（大多数使用“m”）。例如flickr使用m.flickr.com

（建议使用.mobi TLD，但我从未见过使用过这种情况）

使设计变得非常简单，不要使用太多的图形，您需要尽可能地保持它们。 This可能对设计有所帮助。

我可能会为移动用户构建一组不同的页面，使用与主站点相同的业务对象等。

如果两个景点的设计之间的差异不是很大，那么您可以通过提供单独的CSS文件来获得一种方式吗？

Answer 8

您的网站应该限制在可以支持最高要求的手机上。你甚至无法招待所有的mobile phone。

您的网站应该有不同的css样式集，HTTP AGENT必须根据Css选择的请求检查客户端类型。

我该如何设计手机网站？

8 个答案: