主页 » 软件 » 正文

电脑上怎么调试手机端页面?试试chrome的User-Agent马甲

 bandian2014/12/21 23:26 3,856 ℃ 2条点评
小号字体中号字体大号字体
这两天一直在修改网站在手机端显示的样式.以前用D8的时候由于是自适应设计,我只要把浏览器的窗口拉得窄一些就可以进行手机端样式的调试了,但是现在的主题是通...

这两天一直在修改网站在手机端显示的样式.以前用D8的时候由于是自适应设计,我只要把浏览器的窗口拉得窄一些就可以进行手机端样式的调试了,但是现在的主题是通过判断手机端浏览器的User-Agent之后直接显示的手机专用页面。因为是UA判断,电脑端的浏览器根本就无法显示手机页面,而手机浏览器又没有审查元素的功能,这导致我的调试工作异常麻烦。。。

有的时候你根本就分不清到底是哪个元素撑破了格子、又是那个元素挡住了另一个元素,我只有不停的进行这样一个死循环:修改样式→FTP→手机上刷新页面→修改样式→FTP→手机上刷新页面

好在刚才找到一个chrome调试手机WEB应用的方法,使用之后惊呆了,我竟然不知道正在我手中的chrome有这么强大的功能!很有种骑驴找驴的感觉。。。
下面是使用方法:按下WIN+R打开运行,然后复制下面的指令到输入框来打开chrome:

模拟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 (iPad; U; CPU OS 3_2_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10"

模拟诺基亚N97:

chrome.exe --user-agent="Mozilla/5.0 (SymbianOS/9.4; Series60/5.0 NokiaN97-1/20.0.019; Profile/MIDP-2.1 Configuration/CLDC-1.1) AppleWebKit/525 (KHTML, like Gecko) BrowserNG/7.1.18124"

我不知道上面最后这段模拟N97的代码是不是还有效,因为网站并没有针对不同的机型做专门的优化,我无法得知显示效果到底是不是真实的。再一个原因是,毕竟现在用N97的人太少了,chrome也升级好多个版本了,不知道谷歌的工程师们在升级之后还有没有考虑要照顾那一小撮使用N97(塞班系统)的人。

总之,我顺利的完成了手机端样式的修改,chrome以及谷歌在我心中的形象又高大了许多许多。

上一篇:移动端网站建设必备:判断移动设备的php类mobile_detect.php
下一篇:我整理了几段经典的FC游戏音乐--来看看哪一段会让你起鸡皮疙瘩?
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=751
转载请注明转自 » 格部落格 » 电脑上怎么调试手机端页面?试试chrome的User-Agent马甲

已有2条评论,欢迎点评!

  1. avatar#2bandian

    真心很好用是吧

    2014-12-25 pm9:33回复
  2. avatar#1李鹏

    最近刚好在做手机版的网站,刚好帮助我了,博主威武,支持支持 电脑上怎么调试手机端页面?试试chrome的User-Agent马甲

    2014-12-25 pm8:00回复