下面讲的都是移动端适配的原理性内容,觉得没意思的,想要移动端适配方案的,点击下面链接去复制js代码 移动端rem适配,h5适配,1px像素问题 1.设备独立像素 与屏幕密度有关,简称dip。即屏幕的大小,屏幕的尺寸(别名叫点,是个单位) 获取: window.screen.width / window.screen.height 注意: 1、横竖屏切换时,真机中这个值不会变,但在浏览器手机模拟器里是会切换的。 2、在一个点里可以放下多个设备像素。 2.设备像素 也叫物理像素,它是显示设备中一个最微小的物理部件。即所谓屏幕分辨率。 在普通屏幕下1个CSS像素对应1个物理像素,而在Retina屏幕下,1个CSS像素对应的却是4个(或更多)物理像素。 3.CSS像素 CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。 CSS像素称为与设备无关的像素,简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。 4.设备像素比 简称为dpr,定义了物理像素和设备独立像素的对应关系。普通屏dpr值为1。 设备像素比 = 设备像素 / 设备独立像素;通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。 window.devicePixelRatio 获取dpr,存在兼容性问题 5.屏幕像素密度 简称PPI,是指一个设备表面上存在的像素数量,它通常以每英寸有多少设备像素来计算(PPI)。 屏幕密度 = 对角线分辨率/屏幕尺寸 例如 iPhone6 375 * 667 设备独立像素,屏幕尺寸 750 * 1334 设备像素,屏分辨率率 2 设备像素比 dpr=2 viewport 视口,是严格的等于浏览器的窗口,分为以下三类: visual viewport 可见视口(获取宽 window.screen.width ) layout viewport 布局视口(获取宽 document.documentElement.clientWidth ) ideal viewport 理想视口:布局视口=可见视口 以iphone5 下的Safari来说就是: 在iphone的320px物理屏幕上(visual viewport),创建出了一个980px的虚拟窗口(layout viewport). 注:媒体查询中判断的 @media all and (max-width: 400px)也是判断布局视口的宽度。
//1.获取设备屏幕的宽 device-width (所谓 visual viewport)
screen.width //320 (例如iphone 5)
//2.获取视口(viewport)的默认宽度(所谓 layout viewport)
document.documentElement.clientWidth //980 (默认宽度为 980px或1024px等)
//3.获取浏览器可视区域的宽度
window.innerWidth //980 (默认宽度为 980px或1024px等)
document.write(screen.width+"|"+document.documentElement.clientWidth+"|"+window.innerWidth')
// 1920|1222|1222 (PC端浏览器小窗口打开)
// 320|980|980 (iphone手机浏览器打开)
说明: 目前绝大数移动设备默认视口宽为980px 如果页面宽度大于这个值,绝大多数设备会自动计算缩放比例,使页面完整显示在视口而不出现滚动条
例如元素 A 的css样式 width:490px; (490*1)
例如元素 B 的css样式 width:980px; (490*2)
例如元素 C 的css样式 width:1470px; (490*3)
以上3个元素分别在iPhone手机中的测试:
只有元素A,A占屏幕宽1/2
只有元素B,B正好整个屏幕宽100%
只有元素C,C正好整个屏幕宽100%
A,B,C一起,A占1/3,B占2/3 ,C正好整个屏幕宽100%