9

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

4

8 回答 8

21

您不必设计两个不同的网站，但如果让移动用户访问您的网站很重要，您可能希望这样做。

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

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

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

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

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

2：维护单独的站点

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

这是真正关心同时拥有移动和桌面存在的网站的新兴标准。这对您来说工作量更大，但总的来说对您的用户来说要好得多。

从好的方面来说，您可能可以创建一个精简的纯 HTML 网站，该网站适用于移动设备，并且可以作为少数没有 javascript 或有主要可访问性问题阻止他们使用“完整“ 地点。

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

基本程序：

  1. 为移动设备和屏幕设计和构建 UI。
  2. 在两个不同的 URL 上启动站点；新兴的约定是桌面版的 www.yoursite.com 和移动版的 m.yoursite.com。（这允许用户在知道约定的情况下直接浏览到 m.yoursite.com。）
  3. 在 www.yoursite.com 上，嗅探用户代理并测试用户的浏览器是否是移动的。如果是这样，请将用户定向到 m.yoursite.com。
    1. 您可能会使用用各种服务器语言（PHP、Perl 等）编写的嗅探器。检查许可证。这是一个用 php 编写的嗅探器示例。
    2. 来自维基百科关于用户代理嗅探的文章：“专门针对手机的网站，如 NTT DoCoMo 的 I-Mode 或沃达丰的 Vodafone Live！门户网站，通常严重依赖用户代理嗅探，因为移动浏览器之间通常存在很大差异。手机浏览是近几年才出现的，而很多不具备这些新技术的老款手机仍然在大量使用，因此手机门户网站往往会根据浏览手机的不同，生成完全不同的标记代码。可以很小（例如调整某些图像的大小以适应较小的屏幕），也可以非常广泛（例如以 WML 而非 XHTML 呈现页面）。”
  4. 在 m.yoursite.com 上，提供指向 www.yoursite.com 的链接。单击此链接的用户不应被重定向回移动站点，您如何完成此操作取决于您的实施。

您可能想关注Quirksmode以获取他关于移动测试的新兴文章。

3：模板根据用户代理输出不同的数据块，并维护单独的样式表

与 (2) 一样，这需要您嗅探用户代理。与 (2) 不同，您仍然使用所有相同的页面逻辑，并且不必维护两个单独的站点。如果您只是在处理主要是关于读取数据的博客或网站，这可能没问题。

在您的模板代码中，您可以这样说

if( $useragentType != mobile ) {
    echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}

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

于 2009-03-09T06:25:01.970 回答
6

如今，大多数移动设备都支持“移动样式表”，它们只是用于更简单地显示内容的替代样式表。您可以以正常方式将移动样式表添加到您的站点并包含以下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"到第一个，两者都将被使用（因此您可以覆盖原始样式而不是重新开始）。
于 2009-03-08T22:41:46.703 回答
2

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

  1. 专注于内容

  2. 避免插件

  3. 遵循网络标准

  4. 将内容与布局/设计分开，尽可能多地使用 css。

  5. 使用文字和图片。

如果需要，请添加其余的花里胡哨，但请确保网站内容始终可用，即使关闭了花里胡哨。如果您可以使用像 lynx 这样的简单浏览器和像 firefox 这样的普通浏览器来浏览页面，那么您就在正确的轨道上。

欲了解更多信息，请随时访问任何浏览器活动

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

更新：添加指向 css 媒体类型的链接，正如其他人所说，它是有趣的手持选项。

于 2009-03-08T21:23:09.183 回答
2

要检查网页在移动浏览器中的外观，请使用Opera Mini Emulator

于 2009-03-08T22:24:45.917 回答
2

查看WURFL项目。它的目的是帮助开发人员针对多种手机浏览器，并且早在 Mobile Safari 出现之前就开始了，那是在 HDML、WAP 和 XHTML-MP 时代。然而，它是最新的，存储现代设备（如 iPhone）的功能。它拥有超过 400 台设备的数据，并拥有 Java、PHP、Perl、Ruby、Python、.NET、C++ 库。根据您希望针对您的移动应用程序的广泛程度，这是值得关注的。这是使用 WURFL 的网站列表。

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

于 2009-03-09T01:25:02.520 回答
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) 版本/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”进一步证实了这一点

于 2009-03-08T21:00:23.543 回答
1

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

（有人建议使用.mobi TLD，但我从未见过使用过）

让设计超级简单，不要使用太多的图形，你需要将它们尽可能小。 这可能对设计有所帮助。

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

如果这两个景点的设计差异不是很大，您也许可以通过提供单独的 CSS 文件来获得一种方法？

于 2009-03-08T22:08:55.907 回答
0

您的网站应仅限于可以支持最大要求的手机。你甚至不能娱乐所有的手机。

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

于 2010-01-22T19:41:24.983 回答