1. 移动端适配的代码(设计稿iPhone6)如下:
(function (doc,win) {// seMetaTagScale(doc, win)var fn = function () {var deviceWidth = doc.documentElement.clientWidth; // css逻辑像素,不是物理像素if (deviceWidth >= 828) {// 超过某个宽度,保持font-size值不变。deviceWidth = 828;}doc.documentElement.style.fontSize = deviceWidth / 5 + 'px';// 根元素的font-size的值,一般取移动端ui组件库的建议值比较好。}window.addEventListener('orientationchange'in win ? 'orientationchange' : 'resize', fn ,false);doc.addEventListener('DOMContentLoaded',fn,false);})(document,window)function seMetaTagScale(doc, win) {const dpr = win.devicePixelRatio;const scale = 1 / dpr;const contentStr = `width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`;const metaDOM = doc.querySelector('meta[name="viewport"]');metaDOM.setAttribute('content', contentStr)}
2.window.devicePixelRatio
是什么window.devicePixelRatio
获取的是设备物理像素和独立像素的比。应用
缩放比用1/dpr
可以解决1px边框在移动端屏幕上显示“粗”的问题,以屏幕物理像素来显示这1px的边框。
3.屏幕分辨率
概念像素每英寸(Pixel per inch, ppi)。指纵横向上的像素点数,单位是px。例如,1920 * 1080 ,表示屏幕横向像素为1920px,纵向为1080px注意
有一点要明确,谷歌浏览器模拟调试移动端看到的iPhone6的屏幕宽度为375,指的是css像素(设备独立像素或者逻辑像素),而750px指的是手机上的真实存在的物理像素,例如,iPhnoe6屏幕物理像素点750 * 1334。这里也就是手机系统设置中的屏幕分辨率。
4.document.documentElement.clientWidth
document.documentElement.clientWidth
获取的是移动设备的layout viewport(布局视口宽度),也是网页的宽度。是css像素不包括滚动条的宽度。而window.innerWidth是包括的,二者之差,可以得出滚动条的宽度。5.理想视口
理想视口怎么得到?width=device-width
,这是将layout viewport(布局视口)宽度设置为设备屏幕宽度,这句就得到了理想视口。
6.若屏幕分辨率过大,像平板这种,如何处理呢?
我的处理是设置一个屏幕阈值,当屏幕物理像素(document.documentElement.clientWidth
)超过某个值时,页面便不再等比变化进行适配这样处理,势必会导致视口区域留白。因此,我会将页面居中显示,然后,背景色为黑色。这样显示稍微好点。如图:css样式为:
html{width: 100%;background-color: #000;}body{width: 7.5rem;margin: 0 auto;background: #fff;}