0072 移动web开发流式布局 之 移动端基础

1.1浏览器现状

PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。

国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。

总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。


1.2 手机屏幕的现状

  • 移动端设备屏幕尺寸非常多,碎片化严重。
  • Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。
  • 近年来iPhone的碎片化也加剧了,其设备的主要分辨率有:640x960, 640x1136, 750x1334, 1242x2208等。
  • 作为开发者无需关注这些分辨率,因为我们常用的尺寸单位是 px 。

1.3常见移动端屏幕尺寸

注:以上数据均参考自 https://material.io/devices/

注:作为前端开发,不建议大家 去纠结dp,dpi,pt,ppi等单位。

在这里插入图片描述

1.4移动端调试方法

  • Chrome DevTools(谷歌浏览器)的模拟手机调试
  • 搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器
  • 使用外网服务器,直接IP或域名访问

posted on 2019-12-31 20:11  冲啊!  阅读(159)  评论(0)    收藏  举报

导航