Web 如何为手机设计网站

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

你必须设计两个不同的网站来做到这一点

对

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

您的编程语言可能有某种方式来查看客户机的信息。例如，PHP有一个超全局变量

$\u SERVER

，它包含服务服务器和访问客户端的各种信息。在本例中，您可能对

$\u SERVER['HTTP\u USER\u 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 Mozilla/5.0（Macintosh；U；Intel Mac OS X 10_5_6；en us）AppleWebKit/528.16（KHTML，类似Gecko）版本/4.0 Safari/528.16 这说明我正在运行MacOSX10.5.6，使用Safari4.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 Mozilla/5.0（iPhone；U；类似CPU的Mac OS X；en）AppleWebKit/420+（KHTML，类似Gecko）版本/3.0 Mobile/1A543a Safari/419.3 “iPhone”已经发布了它，但“Mobile”和“Safari”这两个关键词进一步证实了这一点。

简单一点，想一想，你就会做对的。 （iPhone比普通浏览器有更多功能…）

关注内容

避免使用插件

遵循网络标准

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

使用文本和图片

如果必须，请添加其余的铃声和口哨，但请确保网站的内容始终可用，即使铃声和口哨已关闭。 如果你能用lynx这样的简单浏览器和firefox这样的普通浏览器浏览网页，那么你就走上了正确的道路

欲了解更多信息，请访问

---

编辑：如果不是很明显，您可以为不同类型的浏览器使用不同的css，但始终使用相同的内容。 访问以获得一个很好的演示

---

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

---

对于移动站点，大多数站点的子域略有不同（大多数使用“m”）。e、 g.用途

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

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

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

---

如果这两个景点的设计差异不大，你也许可以找到一种方法，只提供单独的CSS文件？

要检查weppage在移动浏览器中的外观，请使用

现在大多数移动设备都支持“移动样式表”它们只是替代样式表，以显示更简单的内容。您可以以正常方式将移动样式表添加到站点，并包括

media=“掌上电脑”

属性：

<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />

然后这些风格将适用于手机

这种方法唯一的问题是，如果你的HTML太大，可能需要一段时间才能加载页面，因为大多数移动浏览器都比较慢（除了Opera Mini）。这就是为什么像flickr和digg这样的大型网站使用不同的网站

补充说明：

• 庞大的HTML不会对Opera Mini产生太大影响，因为它使用了一个代理，代理在外部进行渲染，然后向设备发送一个特殊的“图像”
• 使用简单、干净的HTML，然后您可以将其发送到普通浏览器和移动设备
• 您必须检查带有

  media

  属性的样式表组合。IIRC添加上述代码将使浏览器忽略第一个样式表。如果将

  media=“all”

  添加到第一个样式中，将同时使用这两个样式（因此，您可以覆盖原始样式，而不是重新开始）

查看该项目。它的目的是帮助开发人员瞄准多种手机浏览器，早在HDML、WAP和XHTML-MP出现之前就开始了。不过，它是最新的，存储了iPhone等现代设备的功能。它拥有超过400个设备的数据，并且在java、PHP、Perl、Ruby、Python、.NET、C++中都有库。这取决于你想将你的移动应用定位在多大的范围内，这是一个值得关注的问题。使用WURFL的站点列表

---

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

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

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

1：相同的HTML，不同的屏幕和手机样式表

其思想是：向所有请求提供相同的HTML结构。您为SCREEN和MOBILE分别创建了一个样式表和一个样式表

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

坏：对你的用户来说。在移动设备上易于使用的站点对于普通浏览器来说通常效率低下；而且，为台式机/笔记本电脑优化的网站在移动设备上往往失败得很惨。

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