移动端适配方案总结(-)

时间 2019-11-11

标签移动适配方案总结栏目无线繁體版

原文原文链接

基本概念：

viewport视口

浏览器的窗口。viewport与跟viewport有关的meta标签的关系，详细建议读一读这篇文章：移动前端开发之viewport的深刻理解，viewport与布局的关系，能够看下这篇文章：在移动浏览器中使用viewport元标签控制布局html

visual viewport 可见视口屏幕宽度
layout viewport 布局视口 DOM宽度
ideal viewport 理想适口：使布局视口就是可见视口前端

设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为：git

（visual viewport）= （layout viewport）* scale

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

　　设备像素比dpr(device pixel ratio)

　　设备像素比（1/scale）＝物理像素 / 设备独立像素github

　　viewport中的scale和dpr是倒数关系。
　　获取当前设备的dpr：web

JavaScript: window.devicePixelRatio。

CSS: -webkit-device-pixel-ratio, -webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio。不一样dpr的设备，可根据此作一些样式适配(这里只针对webkit内核的浏览器和webview)。

　　设备独立像素dip或dp

　　dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip能够用来辅助区分视网膜设备仍是非视网膜设备。浏览器

安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不一样的等级。规定以160dpi为基准，1dp=1px。若是密度是320dpi，则1dp=2px，以此类推。
IOS设备：从IPhone4开始为Retina屏ide

CSS像素与设备独立像素之间的关系依赖于当前的缩放等级。

　　物理像素(physical pixel)

物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的倒是4个物理像素。布局

　　CSS像素

　CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。通常状况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是咱们写CSS时所用的像素。idea

　　屏幕像素密度PPI(pixel per inch)

屏幕像素密度是指一个设备表面上存在的像素数量，它一般以每英寸有多少像素来计算(PPI)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。spa

屏幕密度 = 对角线分辨率/屏幕尺寸

概念关系图

　　　　　　　　　　　　　　　　　屏幕尺寸、屏幕分辨率-->对角线分辨率/屏幕尺寸-->屏幕像素密度PPI | 　　　　　　　　　　　设备像素比dpr = 物理像素 / 设备独立像素dip(dp) | viewport: scale | CSS像素px

　　rem(一个CSS单位)

　　定义：font size of the root element.

不一样的是em是相对于父元素，而rem是相对于根元素。rem定义是根元素的font-size, 以rem为单位，其数值与px的关系，需相对于根元素<html>的font-size计算

浏览器默认 1rem = 16px

动态设置根元素fontSize

根元素fontSize公式：width/fontSize = baseWidth/baseFontSize