用火狐浏览器进行网站的手机页面设计与开发

时间:2024-03-26 16:23:08

本文是用火狐浏览器进行网站的手机页面设计与开发的简单方法。

首先:进浏览器右上角,打开菜单,点击开发者,选择响应式设计模式;

用火狐浏览器进行网站的手机页面设计与开发


这个时候可以看到,网页的效果并不是我们开发想要的,所以要进行进一步的设置:

用火狐浏览器进行网站的手机页面设计与开发


在自定义user agent框内输入我们需要的手机浏览器的user-agent,


用火狐浏览器进行网站的手机页面设计与开发


然后再刷新即可。当然这里需要注意的是,如果网站是通过mobile或者wap单独访问手机端的话,需要在域名后加上对应的mobile或wap!!!


用火狐浏览器进行网站的手机页面设计与开发


在这里附上几个本人常用的手机浏览器的user-agent:

Android QQ浏览器 For android
MQQBrowser/26 Mozilla/5.0 (Linux; U; Android 2.3.7; zh-cn; MB200 Build/GRJ22; CyanogenMod-7) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

Android UC For android
JUC (Linux; U; 2.3.7; zh-cn; MB200; 320*480) UCWEB7.9.3.103/139/999
备注: 320*480 是设备的分辨率,可以修改

Android Pad Moto Xoom
Mozilla/5.0 (Linux; U; Android 3.0; en-us; Xoom Build/HRI39) AppleWebKit/534.13 (KHTML, like Gecko) Version/4.0 Safari/534.13

ipad
Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10