如何进行网站自适应效果检测?

随着3G、4G网络的普及,使用移动设备的用户越来越多。移动设备使用量也逐渐赶超PC设备,而成为访问互联网最常见的终端。

在移动设备成为主流的同时,网站的展现也需要在不同尺寸的移动终端展现出来,那么问题就来了!当网页设计师已经做出了适应各种终端的响应式网页后,该如何去进行不同设备上呈现同样的网页效果的检测工作呢?

通常情况下,这项测试工作会需要各种类型的移动设备来配合,显然很麻烦。幸运的是,网络上随之出现了一款名为“Screenfly”的在线检测工具,可以模拟显示在各种设备、各种分辨率下的网站显示效果,可谓十分方便。可惜的是,这款小工具好像出了些问题,无法正常工作了!

不过没关系,还有一种被开发者广为使用的方法,很是实用。这种方法就是通过修改Google Chrome浏览器的User-Agent来达到模拟移动端显示效果的,大家都知道很多网站就是通过User-Agent来判断浏览器类型的,通过对浏览器的辨识结果来确认访问者使用的终端,进而呈现相应终端下的内容效果。

方法(不适用于XP):打开“开始——运行”,在【运行】框中输入下方相应的浏览器命令来启动谷歌浏览器。

Android:

chrome.exe --user-agent="Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"

iPhone:

chrome.exe --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"

iPad:

chrome.exe --user-agent="Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405"

Windows Phone:

chrome.exe --user-agent="Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; KDDI-TS01; Windows Phone 6.5.3.5)"

BlackBerry:

chrome.exe --user-agent="Opera/9.80 (BlackBerry; Opera Mini/6.1.25376/26.958; U; en) Presto/2.8.119 Version/10.54"
 
目前共有9条评论
你目前的身份是游客,评论请输入昵称和电邮!

  1. 谁能赶上这泊浪潮呢!
    三亚婚纱摄影 2015.04.30 23:57 @
  2. 后面的数字是什么意思
    威客 2015.01.6 16:01 @
  3. 感觉还不错的。
    威客百科 2014.12.30 15:15 @
  4. 大叔发下下雪的代码教程呗
    cqdaidong 2014.12.27 22:30 @
  5. 很实用的东东。
    梦想网络 2014.12.26 16:15 @
  • 暂无Trackback