一、一些基本概念
- 视窗(viewport):手机端提供了两个视窗:
- visualviewport:视觉窗口,用户缩小放大屏幕时改变的就是视觉窗口;
- layoutviewport:布局窗口,给前端布局用的,其大小为dpr * dip(就是html的宽度,Apple的layoutviewport默认为980)
- 物理像素(pp):显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度(可以理解为一个一个的灯管)。
- 设备独立像素(dip):可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素) ,通俗的讲,就是手机屏幕上能显示的页面的宽度,即visualviewport窗口的宽度。即下图的中的高宽:
- 屏幕密度(dpi):1英寸内的物理像素
- 设备像素比(dpr):由物理像素和独立设备像素决定,dpr=物理像素/独立设备像素(pp/ dips)
- retina屏:屏幕像素密度(ppi)达到300,就称为Retina屏(视网膜屏),retina屏的dpr一般为2
二、meta/viewport
用法:<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, minimum-scale=1, user-scalable=no" >
- width:设置layoutviewport的宽度,device-width表示设备独立像素(即html宽度为手机能显示的宽度,这样能保证能显示全部的页面),也可以直接写数值
- initial-scale:页面的初始缩放比例
- maximum-scale:最大放大比例,最大为10
- minimum-scale:最小缩放比例,最小为0.25
- user-scalable:是否允许缩放
三、meta/ flexible
用法:<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" /> ,设置设备像素比(dpr)
- initial-dpr:把dpr强制设置为给定的值
- maximum-dpr:会比较系统的dpr和给定的dpr,取最小值。
注意:这两个参数只能选其一。
三、flexible原理
源码:
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))