如何用安卓手机预览手机版网页?

王志勇 发表于 2021年01月27日 08:01

这是大约一年前有人在v2ex问的问题。我做手机版网页是从2017年开始,之后做的新网页都同时做PC版、手机版。每个网页,都用同一个URL,由PHP来判断浏览器的UA是PC浏览器、还是手机浏览器,然后产生相应的样式表的字体大小、宽度。还有一些区域,PC版和手机显示的内容不同,少量不同用判断语句,不同的内容如果是较大的区域,就用include不同文件的方式。

PC版、手机版的样式表大部分一样,只有部分字体大小,部分宽度不一样。也有人喜欢把网页做成响应式网页来自动适应PC版、手机版,各有利弊,响应式网页设计更复杂,并不见得很实用,所以我没有采有这种方式,用判断浏览器类型的方式反而简单、灵活一些。

用安卓手机来预览手机版网页,手机必须Root,因为需要修改hosts文件,才能用手机浏览本地电脑的文件。从安卓5.0之后,有部分手机能Root,部分手机不能Root,安卓6.0之后就彻底不允许Root。所以可以选用一台能Root的安卓5.0手机,或者安卓4.4以及之前版本的手机,我常用的3台测试网页的手机分别是安卓5.0、4.4、4.2。

不能Root的手机也可以测试,但无法修改hosts文件,只能访问www上的远程网页。

修改手机hosts文件的方法,错一步都会失败:

1. 请先把手机Root,最好的Root软件是Kingroot。
2. Root成功后,请打开“ES文件浏览器”→菜单栏 工具→Root工具箱,选择“开”。
3. 用ES文件浏览器,选择“/根目录”,打开/etc目录,把此目录下的hosts文件(无扩展名),用ES文件浏览器WIFI无线传输到电脑中,此时电脑需要提前设置好局域网共享。
4. 电脑用PHP等语言,编写一个文本处理工具,步骤是打开文本文件→删除chr(13)→写入文件,或者用其它文本工具,打开hosts文件。
5. 电脑必须固定IP,比如我设定的是192.168.8.8。
6. 编辑hosts文件,需要注意2点,一是\r,也就是PHP的chr(13)的字符必须删除,二是hosts文件最后一行必须有一行空白行,这2点缺一不可,都会导致无法生效。
7. 再把编辑好的hosts文件,回传到手机的/etc目录,直接生效,手机不需要重启。

比如我的电脑IP是192.168.8.8,hosts格式为:
192.168.8.8 auiou.com www.auiou.com
192.168.8.8 abc.com www.abc.com def.com
(空白行)

多域名之间,用空格隔开,也可以回行再写IP、域名。

上述是真机测试的方法。很多时候,用PC浏览器,修改为手机UA,也有一定的效果,因为这样能节省手机电量,不用总是按手机。最容易修改UA的是火狐浏览器,设置方法如下:

在火狐浏览器,地址栏输入:about:config
搜索:general.useragent.override
如果找不到,鼠标右键→新建→字符串→general.useragent.override→值填写:
HS-U978/1.0 Linux/3.4.5 Android/4.2.2 Browser/AppleWebKit534.30 Profile/MIDP-1.0 Configuration/CLDC-1.0

上述值也可以简写为:
HS-U978/Android

把火狐浏览器恢复为PC版:
about:config
搜索:general.useragent.override
鼠标右键→重置

3条评论:
1   老杨 2021-01-28 01:21
感觉区分手机版、PC版稍麻烦(需要两套主题吧?),自适应的话就 css 多几个根据宽度调整字体大小,隐藏一些标签,调整内容宽度……

自由勇 2021-01-28 10:01
是的,现在开发网页最好手机版、PC版都同时做,能争取更多用户,sina.com.cn到现在还有很多网页只有PC版。

2   哥斯拉 2021-02-02 19:39
可以不root,路由上设置dnsmasq或其他dns服务即可,局域网能都有效

发表评论:
名字: (*必填)
博客: (可省)

正文:

  记住信息?

王志勇:1980-09-26 (41周岁)
程序设计,前端设计。

版权声明:本博客所有文章,均符合原创的定义,禁止转载,违者将必究;正确的方法是贴原文的标题和网址即可。

与此相关的链接
自由勇专栏

Blog存档 Archives

2021年06月(9)
2021年05月(17)
2021年04月(25)
2021年03月(6)
2021年02月(17)
2021年01月(30)
2020年12月(19)
2020年11月(18)
2020年10月(15)
2020年09月(14)
2020年08月(14)
2020年07月(14)
2020年06月(16)
2020年05月(13)
2020年04月(18)
2020年03月(14)
2020年02月(15)
2020年01月(16)
2019年12月(11)
2019年11月(26)
2019年10月(25)
2019年09月(30)
2019年08月(10)
2019年07月(29)
2019年06月(30)
2019年05月(26)
2019年04月(30)
2019年03月(30)
2019年02月(30)
2019年01月(30)
2018年12月(30)
2018年11月(30)
2018年10月(30)
2018年09月(17)
2016年-2017年(9)
2014年06月-09月(10)
2013年 +

2012年 +
2011年 +
2010年 +
2009年 +
2008年 +
2007年 +
2006年 +
2005年09月(4)

Copyright © 2006-2021 auiou.com All rights reserved.
此Blog程序由王志勇编写