云上小悟
首页   关于   小悟志   栏目   标签   文章   归档   友链   联系

   云上小悟  +  

当前位置 : 首页 » 网站建设 » 移动版网页调试技巧 正文

移动版网页调试技巧

网站建设 / by: 麦新杰 / 发布:2015年10月7日 / 70次阅读 / 4条评论
/ 最后修改时间: 2015-10-06 11:54:03

网站建设 / 2015年10月7日 / 70次阅读 /


移动版网页调试技巧

现在谁都不能否认,互联网已经进入移动互联的时代,随时随地上网,永远在线,在智能手机的辅助下,早已成为现实。而对于网站开发和运营来说,网站只有桌面版网页(PC端显示),已经不够了,必须开发对应的移动版网页。移动版网页,我们也可以叫它们Web App。(本文不讨论网站移动版与桌面版的对应关系问题,仅仅介绍移动版网页的调试技巧)

移动版网页在开发过程中,调试起来不如桌面版那么直接简单,会有一些小问题。我们很难直接在手机上进行移动版网页的调试,一方面的手机屏幕小,另外一方面的如何查看源代码,查看之后,又如何修改调试,操作起来太麻烦。

一般情况下,进行移动版网页的开发调试,都需要用到在电脑上模拟手机浏览器访问网页。而最方便的模拟方法,莫过于使用Google的Chrome浏览器,这里也包括了使用Chrome浏览器内核的各种品牌的浏览器,比如360浏览器,百度浏览器,QQ浏览器等等。

麦新杰一直使用360浏览器,这里就用360浏览器来举例说明如何在电脑上模拟手机浏览器访问网页,麦新杰的360浏览器的大版本是7。如果使用其它浏览器,或者直接使用Chrome浏览器,整个设置过程大同小异。还有个细节,类似于360,百度,QQ等公司开发的浏览器,一般都有两种浏览页面的模式,我们必须选择极速模式,这样使用的才是Chrome的内核。如下图:

浏览器极速模式对应Chrome内核

浏览器极速模式对应Chrome内核

我们所有需要做的就是把360浏览器的一个窗口设置成移动模式,自定义user agent,让网站的服务器返回移动版网页。

如下图,在浏览器窗口页面的任意地方点右键,选择“审查元素”,或者直接按F12:

设置浏览器窗口为移动模式

设置浏览器窗口为移动模式

然后你会看到下面这个样式的界面,我们调试网页程序,常常会用到这个界面。这个界面的右下角有一个齿轮形状的setting按钮,点击这个按钮:

代码窗口和setting按钮

代码窗口和setting按钮

调试移动版网页,我们一般把这个浏览器的显示代码和配置窗口移动右边,直接拖动鼠标即可。然后请关注下面这个配置页面,这是移动网页调试的核心:

移动版网页调试参数配置界面

移动版网页调试参数配置界面

上面的图片展示了我们需要做的一些配置。override里面一定要选中enable,否则没有效果;然后一定要选择一个user agent(网站服务器判断是否给移动版网页,就是通过user agent这个参数),这样就是在模拟手机终端以及终端使用的浏览器;我们也可以指定左边的这个模拟窗口的尺寸,响应式布局的移动版网页需要用到这个;还可以模拟触摸事件。注意左边窗口的右上角有一组红色的提示问题,这表示这个窗口的user agent已经被覆盖,模拟生效。左边展现出来的,就是云上小悟独立博客移动版网页的效果,调试开始了。呵呵。

注意:上面介绍的配置,只针对某一个窗口,同样的浏览器,换个窗口,这个配置就没有了,需要重新配。如果你要测试的移动版网页的链接,是通过新窗口打开,最好的办法就是复制链接地址,然后在同一个窗口打开。

麦新杰刚刚进行了一次云上小悟的移动版网页的代码升级,希望大家喜欢。

本文固定链接:http://www.maixj.net/wangzhan/yidongbanwangye-tiaoshijiqiao-8917

“移动版网页调试技巧”有4条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  • 明月登楼  says:

    不错,不知道UCweb里怎么用呢! 移动版很不错,我这会儿就是在移动版里评论的!   [ 回复 ]

    • 麦新杰  says:

      ^____^,估计你是第一个在云上小悟移动版里面评论的人! UC是移动浏览器,桌面上不能用吧?没有使用经验。   [ 回复 ]

      • 明月登楼  says:

        不是吧,我是第一个移动版里留言的?   [ 回复 ]

        • 麦新杰  says:

          是啊,移动版的留言不能留网址。   [ 回复 ]


前一篇:
后一篇:

麦新杰的云上小悟独立博客网站文章内容,除非特别注明,全部都是原创,如需转载,请先阅读版权声明!原创文章更具个性,有些文字虽略显随意,但不影响个人思想表达。部分文章是我自己的笔记,为自己记录,总结和收藏,同时也分享给您!这是本博建设的出发点,希望您喜欢并得到您的支持!喝杯茶,慢慢阅读...

©Copyright 麦新杰 SINCE 2014 云上小悟独立博客版权所有  备案号:苏ICP备14045477号-1  

本站360安全检测  Valid CSS!