如何开始开发可以从移动电话浏览的网站？例如，如果您从iPhone浏览Gmail网站，则该网站看起来与普通网站不同。您需要设计两个不同的网站才能做到这一点吗？如何知道网站是否被移动浏览器访问？
8个回答
21
你不必设计两个不同的网站，但如果让移动用户访问你的网站很重要，那么你可能想这样做。
有几种方法可以解决这个问题，每种方法都有优缺点。我假设你的网站将其信息存储在数据库中，并使用一组模板发布该数据？（例如Ruby on Rails或Django网站；PHP网站；博客等）。如果你手工编写了一堆静态HTML页面，那么这将是更加费力的。
1：为SCREEN和MOBILE维护相同的HTML，不同的样式表
思路：您向所有请求提供相同的HTML结构。您为SCREEN和MOBILE创建一个样式表。
好处：对于您，程序员来说。维护2个样式表比维护2个完全独立的模板站点更容易。
坏处：对于您的用户。易于在移动设备上使用的网站通常对普通浏览器效率低下；而针对桌面/笔记本电脑进行优化的网站在移动设备上经常表现不佳。显然，这取决于您如何编写页面，但在大多数情况下，将普通网站推送到移动浏览器会对您的用户产生不利影响。（请参见http://www.useit.com/alertbox/mobile-usability.html，了解Jakob Nielsen最近关于移动站点的可用性研究摘要。）
2：维护不同的站点
这样做可以让你主要维护一套模板文件。你还可以简化发送给移动用户的页面，这样当他们只想阅读你的博客文章或其他内容时，不会得到一个臃肿的页面。
有几种方法可以解决这个问题，每种方法都有优缺点。我假设你的网站将其信息存储在数据库中，并使用一组模板发布该数据？（例如Ruby on Rails或Django网站；PHP网站；博客等）。如果你手工编写了一堆静态HTML页面，那么这将是更加费力的。
1：为SCREEN和MOBILE维护相同的HTML，不同的样式表
思路：您向所有请求提供相同的HTML结构。您为SCREEN和MOBILE创建一个样式表。
好处：对于您，程序员来说。维护2个样式表比维护2个完全独立的模板站点更容易。
坏处：对于您的用户。易于在移动设备上使用的网站通常对普通浏览器效率低下；而针对桌面/笔记本电脑进行优化的网站在移动设备上经常表现不佳。显然，这取决于您如何编写页面，但在大多数情况下，将普通网站推送到移动浏览器会对您的用户产生不利影响。（请参见http://www.useit.com/alertbox/mobile-usability.html，了解Jakob Nielsen最近关于移动站点的可用性研究摘要。）
2：维护不同的站点
(Gmail维护了超过2个系统！它们基本上有不同的容器应用程序/模板来处理相同的数据：完整的AJAX浏览器版本；简单的HTML浏览器版本；基本的移动版本；原生黑莓应用程序；和原生iPhone应用程序。)
这是真正关心移动和桌面存在的网站的新标准。虽然对你来说更费力，但总体而言对你的用户更好。
好处是，你可以创建一个纯HTML的精简站点，适用于移动设备，并作为罕见的没有JavaScript或由于主要无法使用“完整”站点的可访问性问题的Web用户的后备方案。
此外，根据你的用户群体：在美国，人们通常可以使用台式机/笔记本电脑，并使用移动设备进行辅助访问。例如，我使用我的台式计算机预订机票和租车，但是我想在我的移动设备上查找我的预订代码。在许多情况下，你可以通过限制你在移动站点上提供的功能，并要求使用完整计算机来执行不常见的用例。
基本流程：
- 为移动设备和屏幕设计和构建用户界面。
- 以两个不同的URL启动网站；新兴惯例是www.yoursite.com用于桌面版本，而m.yoursite.com用于移动版本。（这样用户可以直接浏览m.yoursite.com，如果他们知道这个惯例。）
- 在www.yoursite.com上，嗅探用户代理并测试用户的浏览器是否为移动设备。如果是，则将用户重定向到m.yoursite.com。
- 有许多使用各种服务器语言（如PHP、Perl等）编写的嗅探器可供使用。请检查许可证。这里是一个使用php编写的嗅探器的示例。
- 来自维基百科有关用户代理嗅探的文章：“针对移动电话的网站，如NTT DoCoMo的I-Mode或Vodafone的Vodafone Live！门户网站，通常会严重依赖用户代理嗅探，因为移动浏览器之间的差异往往非常大。在过去几年中，移动浏览中进行了许多发展，而仍然广泛使用许多不具备这些新技术的旧手机。因此，移动Web门户网站通常会根据用于浏览它们的移动电话生成完全不同的标记代码。这些差异可能很小（例如，调整某些图像以适应较小的屏幕），也可能非常广泛（例如，在WML中呈现页面而不是XHTML）。”
- 在m.yoursite.com上，提供一个返回www.yoursite.com的链接。单击此链接的用户不应被重定向回移动站点，如何实现取决于您的实现。
您可能希望关注Quirksmode的移动测试相关文章。
3：模板根据用户代理输出不同的数据块，并维护单独的样式表
与（2）类似，这需要您嗅探用户代理。与（2）不同的是，您仍然使用所有相同的页面逻辑，并且不必维护两个单独的站点。如果您只处理大部分为阅读数据的博客或网站，则可能可以接受。
在您的模板代码中，您可以这样说：
if( $useragentType != mobile ) {
echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}
这样做可以让你主要维护一套模板文件。你还可以简化发送给移动用户的页面，这样当他们只想阅读你的博客文章或其他内容时，不会得到一个臃肿的页面。
- Ellen B
6
现在大多数移动设备都支持“移动样式表”，这只是一种简化显示的备选样式表。您可以按照正常方式向您的网站添加移动样式表，并包含 media="handheld" 属性：
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
然后这些样式将适用于移动设备。这种方法唯一的问题是，如果你的HTML代码很庞大，页面加载可能需要一段时间，因为大多数移动浏览器速度较慢（除了Opera Mini）。这就是为什么像flickr和digg这样的大型网站使用单独的网站的原因。
附加说明： - HTML代码庞大不会对Opera Mini产生太大影响，因为它使用代理来进行外部渲染，然后向设备发送一个特殊的“图像”。 - 使用简单、干净的HTML代码，可以将相同的代码发送到普通浏览器和移动设备。 - 您将需要检查带有media属性的样式表组合。添加上述代码将使浏览器忽略第一个样式表。如果在第一个样式表中添加media="all"，则两个样式表都将被使用（因此您可以覆盖原始样式而不是重新开始）。
- DisgruntledGoat
2
保持简单，想着 Opera Mini 就能做到。 （iPhone 拥有更加普通的浏览器...）
编辑：如果不明显，您需要为不同类型的浏览器使用不同的CSS，但始终使用相同的内容。请访问css禅园以获取漂亮的演示。
更新： 添加了一个链接到CSS媒体类型，正如其他人所说，手持设备选项很有趣。
专注于内容
避免使用插件
遵循 Web 标准
将内容与布局/设计分离，尽可能使用 CSS。
使用文本和图片。
如果必须添加其他功能，请确保在关闭这些功能时仍然可以访问网站的内容。 如果您可以使用像 lynx 这样的简单浏览器和像 Firefox 这样的普通浏览器浏览页面，则说明您正在正确的轨道上。
欲了解更多信息，请随时访问 任何浏览器运动
编辑：如果不明显，您需要为不同类型的浏览器使用不同的CSS，但始终使用相同的内容。请访问css禅园以获取漂亮的演示。
更新： 添加了一个链接到CSS媒体类型，正如其他人所说，手持设备选项很有趣。
- Johan
2
若要在移动浏览器中查看网页的效果，请使用Opera Mini模拟器。
- theomega
1
在普通版的Opera中，您可以使用“查看”>“小屏幕”选项。它看起来很像Opera Mini，但CSS和JavaScript行为可能会有一些细微的差别。 - George V. Reilly
2
- Jared Oberhaus
1
你需要设计两个不同的站点来实现这个吗？
是的。
我如何知道网站是否由移动浏览器访问？
你所使用的编程语言可能有一些查看客户端信息的方式。例如，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
此信息告诉您我正在运行 Mac OS X 10.5.6 并使用 Safari 4.0。不同的移动浏览器有特定的关键字。例如，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
是的。
我如何知道网站是否由移动浏览器访问？
你所使用的编程语言可能有一些查看客户端信息的方式。例如，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
此信息告诉您我正在运行 Mac OS X 10.5.6 并使用 Safari 4.0。不同的移动浏览器有特定的关键字。例如，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"进一步证实了它的移动设备性质。
- Henrik Paul
1
大多数网站都会为移动站点设置一个稍微不同的子域名（大多数使用“m”）。例如，flickr 使用 m.flickr.com
（有一种建议使用 .mobi TLD，但我从未见过这种用法）
使设计超级简单，不要使用太多图形，需要尽可能将它们保持小巧。 这个 可能对设计有所帮助。
我可能会为移动用户构建一组不同的页面，利用与主站相同的业务对象等。
如果两个网站之间的设计差异不是太大，您可能只需提供单独的 CSS 文件即可？
- Wilfred Knievel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接