如何检测网页上移动设备的点击(detect hits from mobile devices on web pages)

多年来,专家们一直在说,通过移动设备访问网站的流量一直在急剧增加。出于这个原因,许多公司已经明智地开始采用移动战略来实现其在线业务,创造适合手机和其他移动设备的体验。...

多年来,专家们一直在说,通过移动设备访问网站的流量一直在急剧增加。出于这个原因,许多公司已经明智地开始采用移动战略来实现其在线业务,创造适合手机和其他移动设备的体验。

Smartphone resting on laptop keyboard

一旦你花时间学习如何为手机设计网页,并实施你的策略,你还需要确保网站的访问者能够看到这些设计。有很多方法可以做到这一点,有些方法比其他方法更好。下面是一个你可以用来在你的网站上实现移动支持的方法,以及在接近尾声的时候关于在今天的网络上实现这一点的最佳方法的建议。

提供指向其他网站版本的链接

到目前为止,这是处理手机用户最简单的方法。与其担心他们是否能看到你的页面,只需在页面顶部附近放置一个链接,指向你网站的另一个移动版本。然后,读者可以自行选择是否要查看移动版或继续使用“正常”版。

此解决方案的好处是易于实现。它要求你为手机创建一个优化版本,然后在正常网站页面顶部附近添加一个链接。

缺点是:

  • 您必须为移动用户维护单独版本的网站。当你的网站越来越大,你可能会忘记维护第二个版本,你的网站可能会失去同步。
  • 您是否也为平板电脑创建了第三个版本?可穿戴设备的第四个版本怎么样?这种特定于设备版本的概念可能会很快失控。
  • 你必须在页面顶部放置一个丑陋的链接,非手机读者可以看到(可能还可以点击)。

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

使用javascript

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

使用css@media掌上电脑

CSS命令@media handled似乎是一种仅用于手持设备(如手机)显示CSS样式的理想方式。这似乎是为移动设备显示页面的理想解决方案。编写一个网页,然后创建两个样式表。第一种是“屏幕”媒体类型,用于为显示器和计算机屏幕设置页面样式。第二种是“手持”样式,用于为手机等小型设备设置页面样式。听起来很简单,但在实践中并不奏效。

这种方法最大的优点是你不必维护两个版本的网站。您只需维护一个,样式表定义了它的外观-这实际上离我们想要的最终解决方案越来越近。

这种方法的一个问题是,许多手机不支持媒体类型,而是使用屏幕媒体类型显示页面。许多老式手机和手持设备根本不支持CSS。最后,这种方法是不可靠的,因此很少用于交付网站的移动版本。

使用php、jsp、asp检测用户代理

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

执行此操作的简单PHP代码如下所示:

这里的问题是,移动设备使用了许许多多的其他潜在用户代理。这个脚本将捕获并重定向其中的很多内容,但无论如何都不会全部。而且一直在添加更多。

另外,与上面的其他解决方案一样,您还必须为这些读者维护一个单独的移动站点!必须管理两个(或更多!)的缺点网站是寻找更好解决方案的充分理由。

使用wurfl

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

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

使用WURFL的好处是有很多人一直在更新和添加配置文件。因此,虽然您正在使用的文件在您完成下载之前就已经过时,但如果您每月下载一次左右,您将拥有您的读者习惯使用的所有移动浏览器,而不会出现任何问题。当然,缺点是你必须不断地下载和更新这些内容,这样你就可以把用户引导到第二个网站上,并避免由此带来的缺点。

最好的解决方案是响应性设计

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

响应式设计是使用CSS媒体查询为不同宽度的设备定义样式的地方。响应式设计允许您为移动和非移动用户创建一个网页。这样,您就不必担心在移动站点上显示什么内容,也不必记住将最新的更改传输到移动站点。另外,一旦编写了CSS,就不必下载任何新内容。

响应式设计可能无法在非常旧的设备和浏览器上完美运行(目前大多数设备和浏览器的使用量非常小,您不必太担心),但由于它是可添加的(在内容上添加样式,而不是删除内容),这些读者仍然能够阅读您的网站,它在他们的旧设备或浏览器上看起来并不理想。

  • 发表于 2021-09-04 21:57
  • 阅读 ( 177 )
  • 分类:IT

你可能感兴趣的文章

是什么让emmc闪存在移动设备上可行,而不是在pc上?

...存来运行桌面系统,比如Windows。但是,是什么让它成为移动设备的理想和可行的选择呢?今天的超级用户问答帖子回答了一位好奇的读者的问题。 今天的问答环节是由SuperUser提供的,SuperUser是Stack Exchange的一个分支,是一个由...

  • 发布于 2021-04-08 08:26
  • 阅读 ( 257 )

如何控制你的亚马逊网络回声(而不是一个狭窄的智能手机应用程序)

...比如启动和停止音乐,询问天气等,用“Alexa,天气预报如何”这样的命令来召唤Alexa是最简单的?” 然而,当涉及到配置回声或在没有语音命令的情况下控制回声时,您需要使用Alexa应用程序(Amazon大力推广)或基于web的界面...

  • 发布于 2021-04-09 22:37
  • 阅读 ( 144 )

如何让移动网络更具可读性(还有桌面网络)

你在**上加载网页时,有多少次只会遇到尴尬的布局、阻碍你前进的广告以及滚动网页时结巴的沉重页面?“读者模式”是一个一键式的解决方案,阅读网页没有挫折感。 它集成到iOS上的Safari中,可以作为Android版Chrome的实验性...

  • 发布于 2021-04-10 06:28
  • 阅读 ( 204 )

你如何找到将广告注入网页的chrome扩展?

...rg(超级用户)提供。 问题 超级用户读者giorgio79想知道如何找到将不需要的广告注入其浏览体验的Chrome扩展: I use Google Chrome and recently noticed random ads showing up, either embedded in web page content or by redirection. When I click on a link, an ad pag...

  • 发布于 2021-04-10 22:17
  • 阅读 ( 183 )

如何在iphone或ipad上获得android风格的本地文件系统

...何应用程序中的其他协议访问文件。 工作原理 相关:如何在iOS8的iPhone或iPad上使用应用程序扩展 iOS 8包括一个文档提供程序/存储提供程序扩展点。任何第三方应用程序都可以**这个。默认情况下,这允许您从iCloud Drive访问文件...

  • 发布于 2021-04-11 03:17
  • 阅读 ( 248 )

firefox的常规版本和开发者版本有什么区别?

...tools built to debug Firefox OS and Firefox for Android to the other major mobile browsers including Chrome on Android and Safari on iOS. So far these tools include Inspector, Debugger, and C***ole & Style Editor. You can watch a video about Valence on YouTube here. Web Audio Editor The Web Audi...

  • 发布于 2021-04-11 04:10
  • 阅读 ( 247 )

保护您的网络和优化您的路由器的最佳wi-fi文章

...好、更安全的体验。以下文章介绍用于Wi-Fi的硬件,以及如何在不同平台(包括移动设备)上安全地设置它、配置和优化硬件、为硬件安装和使用其他固件、自定义Wi-Fi设置,以及如何在家庭或公共网络上使用Wi-Fi时保持安全。 ...

  • 发布于 2021-04-12 15:21
  • 阅读 ( 318 )

如何将网页添加到googlechrome的阅读列表中

...西以后阅读,它与你的iPhone或iPad同步。我们将向您展示如何将网页添加到列表中。 桌面上的“阅读列表”按钮可以在书签栏的右侧找到。如果是你不想要的东西,可以把它去掉。 相关:如何禁用和删除谷歌浏览器阅读列表 Tabl...

  • 发布于 2021-04-14 17:58
  • 阅读 ( 176 )

facebook、dropbox登录凭据在ios和android上容易被盗

...究人员加雷思·赖特“偶然发现”了一种让一台iOS或Android设备认为自己登录了另一台设备的Facebook帐户的方法。显然,该方法也适用于Dropbox,即下一个Web报告。只要从你的iOS或Android设备上复制一个“plist”并粘贴到另一个设备上...

  • 发布于 2021-04-21 21:32
  • 阅读 ( 179 )

微软声称它致力于Windows10Mobile

...•迈尔森(terrymyerson)重申了该公司对陷入困境的windows10移动平台的承诺。在WindowsCentral获得的一封内部电子邮件中,迈尔森谈到了人们对微软移动计划的担忧。边缘可以确认电子邮件是真实的。
 
 
 
 I u...

  • 发布于 2021-05-04 09:41
  • 阅读 ( 111 )
zhi343234
zhi343234

0 篇文章

相关推荐