1. 浏览器现状
PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等
移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器等
国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。
总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。
2. 手机屏幕的现状
- 移动端设备屏幕尺寸非常多,碎片化严重。
- Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920,2K,4k屏等。
- 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
- 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。
3. 常见移动端屏幕尺寸
设备 | 尺寸(英寸) | 开发尺寸(px) | 物理像素比(dpr) |
---|
iphone3G | 3.5 | 320*480 | 1.0 | iphone4/4s | 3.5 | 320*480 | 2.0 | iphone5/5s/5c | 4.0 | 320*568 | 2.0 | HTC One M8 | 4.5 | 320*640 | 3.0 | iphone6 | 4.7 | 375*667 | 2.0 | Nexus 4 | 4.7 | 384*640 | 2.0 | Nexus 5x | 5.2 | 411*731 | 2.6 | iphone6 plus | 5.5 | 414*736 | 3.0 | Samsung Galaxy Note 4 | 5.7 | 480*853 | 3.0 | Sony Xperia Z Ultra | 6.4 | 540*960 | 2.0 | Nexus 7('12) | 7.0 | 600*960 | 1.3 | ipad Mini | 7.9 | 768*1024 | 1.0 |
https://material.io/devices/
4. 移动端调试方法
- Chrome DevTools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
- 使用外网服务器,直接IP或域名访问
|