移动端适配(基础概念+分析flexible源码)

移动互联网发展的如火如荼,这对前端工程师要求就更高了,移动端适配也就成为了重要的问题之一。先说一下涉及到的基本的概念:

1.devicePixelRatio(设备像素比通过window.devicePixelRatio获取,可以=物理像素 / 独立像素=设备像素/CSS像素;可以说物理像素=设备像素;CSS像素是独立像素;
2.屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算
3.Retina屏幕:根据苹果发布产品的定义:PPI高于210(笔记本电脑)、260(平板电脑)、300(手机)的屏幕都称为Retina屏幕
4.px 适用于pc端,1px等于1个逻辑像素
5.em是相对于父元素下的font-size而言的,大面积使用em会比较混乱
6.rem根据html下的font-size的大小来定1rem的大小,是个相对单位,比如font-size:100px;那吗1rem=100px
7.initial-scale,初始的缩放比例
8.minimum-scale,允许用户缩放到的最小比例;
9.maximum-scale,允许用户缩放到的最大比例;
10.user-scalable,用户是否可以手动缩放;

ios的一些必备

1.启用 WebApp 全屏模式,删除苹果默认的工具栏和菜单栏:
2.如果把一个web app添加到了主屏幕中,那么从主屏幕中打开这个web app则全屏显示:
3.iphone,itouch图标,默认 57x57 像素,ipad是72*72;ipad3对应144×144的高分辨率;必须有
4.Retina iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有
5.ios启动画面
6

image.png

  1. viewport-fit;iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值
    contain: 可视窗口完全包含网页内容
    cover:网页内容完全覆盖可视窗口
    auto:默认值,跟 contain 表现一致
    iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量
    safe-area-inset-top 安全区域距离上边边界距离
    safe-area-inset-right 安全区域距离右边边界距离
    safe-area-inset-bottom 安全区域距离底边边界距离
    safe-area-inset-left 安全区域距离左边边界距离

meta常用标签

1.搜索引擎抓取
2.为移动设备添加viewport
3.主屏标题,ios6新增加
4.是否使用webapp模式,删除苹果的菜单栏和工具栏
5.设置苹果工具栏颜色
6.不让页面中的数字识别为电话或者email
7.qq强制竖屏
8.uc强制竖屏
9.uc强制全屏
10.qq强制全屏

移动端适配的方案最火的一个库是淘宝的Flexible,看Flexible库主要做的事情:
(不过现在有的都使用vw和vh来做移动端适配了)

1.判断页面有没有meta[name="viewport"]和meta[name="flexible"]如果有就根据具体viewport和flexible里面的具体内容计算出 scale和dpr;dpr主要是为了不同像素比屏幕下显示文字用的,而 scale是为了解决 1px的线过于粗的问题。
2.如果没有viewport和flexible就根据win.devicePixelRatio来计算出scale和dpr,这里需要判断下是android还是iphone;然后设置data-dpr属性,值是dpr;然后再创建出meta-viewport
3.还有个功能是根据页面的宽度docEl.getBoundingClientRect().width实时设置更新html下的font-size的值,当然rem也就随之更新了
4.还有一点:监听resize和pageshow,随时更新rem;
5.还有一点: 通过判断ajax加载数据完成Document.readyState 和dom树加载完成DOMContentLoaded来随时更新body下的fontSize;
6.还有px2rem和em2px两个函数进行px和rem的转换;
7.这里涉及到540px;因为iphone6Plus也就414px;大于540基本是ipad设备了;

flexible缺陷

1.针对iphone做了些适配;所有安卓设备dpr都是1,很多 Android高清屏下页面图片会不清晰
2.不是纯css的移动适配方案,需要引入js文件;
3.不支持响应式设计方案,响应式设计需要用到css3媒体查询,根据查询到的设备宽度使用不同的css样式。而引入flexible的页面会根据dpr进行缩放,css3媒体查询得到的是缩放前的宽度而不是缩放后的宽度。
4.会涉及到小数问题,不是很精确;

你可能感兴趣的:(移动端适配(基础概念+分析flexible源码))