如何在网页上检测移动设备的命中

将移动设备重定向到移动内容或设计

多年来,专家一直在说移动设备访问者的网站访问量急剧增加。 出于这个原因,许多公司已经巧妙地开始为他们的在线业务采用移动战略,创造适合电话和其他移动设备的体验。

一旦您花时间学习如何为手机设计网页并实施您的策略,您还需要确保您网站的访问者可以看到这些设计。 有很多方法可以做到这一点,有些工作比别人更好。 下面看看您可以用来在您的网站上实现移动支持的方法 - 以及接近尾声的建议,以了解在今天的Web上实现此目标的最佳方法!

提供到其他网站版本的链接

这是目前处理手机用户最简单的方法。 与其担心他们是否能看到您的网页,只需将页面顶部附近的某个链接指向您的网站的单独移动版本即可。 然后读者可以自己选择是想看到移动版本还是继续使用“正常”版本。

这个解决方案的好处是它很容易实现。 它要求您为移动设备创建优化版本,然后在常规网站页面顶部附近的某个位置添加链接。

缺点是:

最终,这种方法是过时的,不太可能成为现代移动战略的一部分。 它有时被用作停止间隙修复,而更好的解决方案正在开发中,但在这一点上它确实是一个短期的创可贴。

使用JavaScript

在上述方法的变体中,一些开发人员使用某种类型的浏览器检测脚本来检测客户是否在移动设备上,然后将他们重定向到单独的移动站点。 浏览器检测和移动设备的问题在于,那里有数以千计的移动设备。 试图用一个JavaScript来检测它们可能会把你所有的页面变成下载的恶梦 - 而且你仍然会遇到与上述方法相同的许多缺点。

使用CSS媒体手持设备

CSS命令@media手持设备似乎是一种理想的方式来显示手持设备的CSS样式 - 比如手机。 这似乎是显示移动设备页面的理想解决方案。 你写一个网页,然后创建两个样式表。 第一个用于“屏幕”媒体类型的页面适合显示器和电脑屏幕。 第二个用于“手持设备”的风格适合那些手机等小设备。 听起来很容易,但它在实践中并不真正起作用。

这种方法最大的优点是你不必维护你的网站的两个版本。 你只需要维护它,样式表定义了它应该看起来的样子 - 这实际上更接近我们想要的最终解决方案。

这种方法的一个问题是,许多手机不支持手持媒体类型 - 他们用屏幕媒体类型来显示他们的页面。 许多旧手机和手持设备根本不支持CSS。 最后,这种方法不可靠,因此很少用于提供移动版本的网站。

使用PHP,JSP,ASP来检测用户代理

这是将移动用户重定向到移动版网站的好方法,因为它不依赖于移动设备不使用的脚本语言或CSS。 相反,它使用服务器端语言(PHP,ASP,JSP,ColdFusion等)查看用户代理,然后将HTTP请求更改为指向移动设备的移动页面。

一个简单的PHP代码来做到这一点看起来像这样:

stristr($ ua,“Windows CE”)或者
stristr($ ua,“AvantGo”)或
stristr($ ua,“Mazingo”)或
stristr($ ua,“移动”)或
stristr($ ua,“T68”)或
stristr($ ua,“Syncalot”)或
stristr($ ua,“Blazer”)){
$ DEVICE_TYPE = “MOBILE”;
}
if(isset($ DEVICE_TYPE)and $ DEVICE_TYPE ==“MOBILE”){
$位置= '移动/ index.php的';
header('Location:'。$ location);
出口;
}
?>

这里的问题是移动设备使用了许多其他潜在的用户代理。 这个脚本会捕获并重定向它们中的很多,但不是全部。 而且更多的是随时添加的。

另外,与上述其他解决方案一样,您仍然必须为这些读者维护一个单独的移动网站! 必须管理两个(或更多!)网站的这个缺点足以成为寻求更好解决方案的理由。

使用WURFL

如果您仍然决定将您的移动用户重定向到一个单独的站点,那么WURFL(无线通用资源文件)是一个很好的解决方案。 这是一个XML文件(现在是一个DB文件)以及各种DBI库,它们不仅包含最新的无线用户代理数据,还包含那些用户代理支持的功能和功能。

要使用WURFL,请下载XML配置文件,然后选择您的语言并在您的网站上实施API。 有用于使用Java,PHP,Perl,Ruby,Python,Net,XSLT和C ++的WURFL的工具。

使用WURFL的好处是有很多人随时更新和添加到配置文件中。 因此,尽管您使用的文件几乎在完成下载之前已过时,但如果您每月下载一次左右,则可能会有您的读者习惯使用的所有移动浏览器,而无需任何问题。 不利的一面是,您必须不断下载并更新这些内容 - 所有这些都可以让用户访问第二个网站以及创建的缺点。

最佳解决方案是响应式设计

因此,如果为不同设备维护不同的网站不是答案,那是什么? 响应式网页设计

响应式设计是您使用CSS媒体查询为各种宽度设备定义样式的地方。 响应式设计允许您为移动和非移动用户创建一个网页。 然后,您不必担心要在移动网站上显示哪些内容,或者记住将最新更改传输到您的移动网站。 另外,一旦你写好了CSS,你就不必下载任何新的东西。

响应式设计可能无法在极其陈旧的设备和浏览器上正常工作(其中大部分目前使用量非常小,不应该担心您的担忧),但是因为它具有附加性(向内容添加样式,而不是采用内容这些读者仍然可以阅读您的网站,但在旧设备或浏览器上看起来不太理想。