Document

前文[《移动端常见适配方案》](http://anata.me/2022/05/09/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%B8%B8%E8%A7%81%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88/)中，我介绍了移动端的一些常见适配方案 > 移动端适配就是在进行**屏幕宽度**的等比例缩放文中我强调了移动端适配是对**屏幕宽度**进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常规情况下，对于屏幕宽度进行等比例缩放已经能解决大部分应用场景了但是对于一种特殊的场景：单屏页面（又称翻屏页面），由于需要把**一整屏**的内容**完整**展示给用户，同时又要求页面不能出现滚动条，那么，仅仅只是针对屏幕宽度进行等比例缩放的适配，其实效果并不理想 ## 设备独立像素 (CSS像素) > 设备独立像素是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素以`iphone7`举例: `iphone7`的`设备独立像素`为 `375 * 667` 也就是手机全屏下的大小，同时也是`chrome`模拟器展示的尺寸可以通过js的`screen.width`和`screen.height`获取 ## 设备像素 (物理像素) > 设备像素也可以叫物理像素，由设备的屏幕决定，其实就是屏幕中控制显示的最小单位以`iphone7`举例: `iphone7`的`设备像素`为 `750 * 1334` `750 * 1334`这个尺寸也可以称为`设计像素`，我们设计和开发页面时，就是以这个设计像素为准 ## 设备像素比（DPR） > 设备像素比(dpr) = 设备像素 / 设备独立像素以`iphone7`举例: `iphone7`的`dpr = 2 = 750 / 375` 也就是说，在`iphone7`下，`1 css像素 = 2 物理像素` 在`css`中一个`1x1`大小的正方形里面，其实有4个物理像素 ![pic](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a1e7fd7d82e54d44846b82818d994ad7~tplv-k3u1fbpfcp-zoom-1.image) `dpr`大于2的屏幕也称为视网膜屏幕(Retina) ## 实际物理像素 `iphone7`的实际物理像素是`750 * 1334`，刚好等于`设备像素`。但不是所有的设备都是`实际物理像素`等于`设备像素` `iphone7 plus`的实际物理像素是`1080 * 1920`。它的`dpr`为3，`设备独立像素`为`414 * 736`，根据公式可以得出，它的`设备像素`等于`1242 x 2208`，远大于实际物理像素。手机会自动把`1242 * 2208`个像素点塞进`1080 * 1920`个物理像素点来渲染，我们不用关心这个过程 ## 单屏幕前面介绍了这么多概念，其实在真正开发中，我们主要关心的是`设备独立像素`和`设备像素` `设备像素` 决定了设计稿的尺寸。移动端设计稿一般是`750 * 1334` 尺寸大小（ iPhone6 的设备像素为标准的设计图），因此相对比较固定 `设备独立像素` 决定了设备的屏幕大小。`iOS`平台下，屏幕尺寸还算相对固定，但是到了`Android`平台下，屏幕尺寸那就~~千奇百怪，百花争鸣~~了。特别需要注意的一点：即使`设备独立像素`确定了大小，我们的网页被用户看到的时候，实际高度还是比`设备独立像素`的高度小很多主要原因是：我们的网页往往是在手机的浏览器上访问的，而这些浏览器自带了顶部地址栏和底部工具栏，这两部分的高度又进一步压缩了我们网页展示的高度（如果我们的网页是在第三方客户端内打开的，比如微博，微信，Twitter, Facebook，那么一般只有顶部地址栏）举个例子，`iphone11`的设备独立像素是`414 * 896`

左图是在`safari`浏览器下：可以看到上下红框部分是浏览器自带的区域，只有蓝框是实际网页展示的高度，这个蓝框的大小是 `414 * 715`(documentElement.clientWidth/documentElement.clientHeight)，已经比设备独立像素的高度少了`181`像素(896 - 715) 右图是在`微信`自带浏览器下：可以看到顶部红框部分是浏览器自带的区域，只有蓝框是实际网页展示的高度，这个蓝框的大小是 `414 * 804`(documentElement.clientWidth/documentElement.clientHeight)，也比设备独立像素的高度少了`92`像素(896 - 804) 收集到的一些常见设备尺寸大小: | 品牌 | 操作系统 | 设备 | 设备独立像素 (screen.width/screen.height) | 自带浏览器下(clientWidth/clientHeight) | | ------ | -------- | ------------ | ------------------------------------- | --------- | | 苹果 | iOS | iPhone 7 | 375 * 667 | 375 * 548 | | | | iPhone 12 | 390 * 844 | 390 * 664 | | | | Ipnone 11/XR | 414 * 896 | 414 * 715 | | | | iPhone X | 375 * 812 | 375 * 635 | | | | | | | | 华为 | 安卓 | P40 | 360 * 780 | 360 * 625 | | | | nova 8 SE | 360 * 800 | 360 * 659 | | | | Mate 30 | 424 * 918 | 424 * 774 | | | | 荣耀8 | 360 * 640 | 360 * 501 | | | | P10 | 360 * 640 | 360 * 526 | | | | 畅玩7x | 360 * 720 | 360 * 584 | | Oppo | 安卓 | R15x | 360 * 780 | 360 * 650 | | | | R17 | 360 * 780 | 360 * 628 | | | | K1 | 360 * 780 | 360 * 622 | | | | | | | | Xiaomi | 安卓 | MIX 2 | 393 * 786 | 393 * 666 | | | | 小米10 | 393 * 851 | 393 * 720 | | | | 小米6 | 360 * 640 | 360 * 521 | | | | k40 | 393 * 873 | 393 * 713 | | | | | | | ## 单屏难点设计稿的的宽高比是固定的，但是真实设备的宽高比永远不是统一的，并且网页的可视区域还会随着访问方式(浏览器，APP客户端)有所改变。同一份设计稿，却要在不同尺寸的设备上，都展示出良好的布局：页面的内容要尽可能**完整**展示在**一屏**之中（甚至不能有滚动条） ## 安全区 + 长背景图

`750 * 1334` 的设计稿，需要考虑到长屏幕时，页面的展示情况比如默认`750 * 1334`大小的内容需要完整展示出来(安全区)，长屏幕`750 * 1750`时，把安全区的内容垂直居中展示即可

此时，我们就需要使用一张长背景图(`750 * 1750`)上下居中作为整个网页的背景 ```css ``` ```html

``` 之后，我们把页面所有的内容，相对`safe-content`进行布局完整页面，点击此处[预览](http://deepred5.com/single-page/example.html) (手机模式查看) 完整代码，直接右键源代码或者点击下方按钮展开

点击展开源代码

```html Document

深红

水漾烛光礼盒

蒂普提克香氛蜡烛（70g）*1

krramel沐浴套装*1

请到游戏内【精彩活动-实物周边奖励兑换】

填写领取信息

```

## 宽高比上面的方案，对于移动端(**屏幕高度大于屏幕宽度**)的大部分场景，的确够用了。但是在折叠屏手机(**屏幕宽度和高度差别不大**)，ipad，pc端(**屏幕高度小于屏幕宽度**)的设备下，我们的页面就很有可能超出了完整的一屏。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07eaba8737c74707882864cb93529486~tplv-k3u1fbpfcp-zoom-1.image) 如果此时，父级元素还设置了`overflow: hidden;`，那么用户甚至不能滑动查看超出屏幕的内容，如果底部是一个可交互的按钮，那么用户就永远不能触发之后的流程了！ ## 问题原因我们的`rem`适配方案，是相对于屏幕宽度进行缩放的，但是不同机型的手机，可视区域的宽高比并不固定，因此对于部分手机，页面内容就很有可能出现**超出屏幕底部**或者**底部留有空白**。对于**底部留有空白**，一般发生在可视高度比可视宽度大很多的情况，前面介绍的`安全区 + 长背景图`方案，就是针对此种情况的解决方案。而对于**超出屏幕底部**，一般发生在可视高度和可视宽度相差不大(折叠屏手机)，甚至可视高度比可视宽度小(横屏或者pc端)的情况，解决方案一般如下: * 使用`css`进行宽高比判断 * 使用`js`进行宽高比判断 * 使用`js`动态修改`rem`大小 * 使用`js`动态缩放整体页面 * 使用`vw`和`vh`进行布局 ## aspect-ratio 注意和`device-aspect-ratio`进行区分，`device-aspect-ratio`是和设备尺寸进行绑定的，但是我们之前介绍过：网页的可视区域会随着访问方式(浏览器，APP客户端)有所改变，因此`aspect-ratio`才是我们真正需要的属性。 > aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率同时它有两个`max-aspect-ratio`和`min-aspect-ratio`兄弟属性，可以和`max-width`和`min-width`进行类比: ```css @media screen and (min-aspect-ratio: 9/16) { // 只要宽高比大于等于9/16，就会执行 } @media screen and (min-aspect-ratio: 3/4) { // 只要宽高比大于等于3/4，就会执行 } @media screen and (min-aspect-ratio: 1/1) { // 只要宽高比大于等于1/1，就会执行 } ``` 对于上面的页面，我们正常的设备独立像素是`375 * 667`，我们可以这样进行高度划分： * 高度大于667：无需调整，我们只怕高度小，不怕高度大，高度大时已经有前面的方案: `安全区 + 长背景图` * 530-667：还是正常，我们也不需要调整 * 490-530 * 375-490 * 小于375：pc端或者横屏，高度已经比宽度小了 ```css @media screen and (min-aspect-ratio: 375 / 530) { .safe-content { transform: translateY(-50%) scale(0.8); } } @media screen and (min-aspect-ratio: 375 / 490) { .gift-logo { transform: scale(0.6); } } @media screen and (min-aspect-ratio: 375 / 375) { .safe-content { transform: translateY(-50%) scale(0.32); } .gift-logo { transform: scale(0.4); } } ``` 比较简单暴力的，就是直接对主要页面区域施加 `transform: scale(0.8)` 这类样式，直接缩小。至于我刚刚划分的高度区间，是通过`chrome模拟器`自己一次次实验调整出来的，这个要**具体页面具体分析**，并没有一个统一的宽高比规定。完整页面，点击此处[aspect-ratio-预览](http://deepred5.com/single-page/example-aspect-ratio.html) (手机模式查看) 完整代码，直接右键源代码 ## JS添加全局类 ```javascript function detectAspectRatio(aspectRatio) { document.documentElement.classList.remove('pc', 'mobile1', 'mobile2'); if (aspectRatio >= 375 / 375) { return document.documentElement.classList.add('pc'); } if (aspectRatio >= 375 / 490) { return document.documentElement.classList.add('mobile1'); } if (aspectRatio >= 375 / 530) { return document.documentElement.classList.add('mobile2'); } } function init() { const clientWidth = document.documentElement.clientWidth; const clientHeight = document.documentElement.clientHeight; const aspectRatio = clientWidth / clientHeight; detectAspectRatio(aspectRatio); } init(); window.addEventListener('resize', init); ``` 本质上就是把css的媒体查询`aspect-ratio`用js实现了一遍，所以这种方案区别不大。 ## 动态修改rem 默认情况下，我们的`rem`是根据可视区域宽度进行计算的，但是在高度较小的情况下，我们可以动态的修改`rem`的参考对象，让它根据可视高度进行计算我们甚至可以实现：无论窗口怎么变，我们的内容都保持原来的比例，并尽量占满窗口封装成一个通用`flexible.js`方法 ```javascript const defaultConfig = { pageWidth: 750, pageHeight: 1334, pageFontSize: 32, }; const flexible = (config = defaultConfig) => { const { pageWidth = defaultConfig.pageWidth, pageHeight = defaultConfig.pageHeight, pageFontSize = defaultConfig.pageFontSize, } = config; const pageAspectRatio = defaultConfig.pageAspectRatio || (pageWidth / pageHeight); // 根据屏幕大小及dpi调整缩放和大小 function onResize() { let clientWidth = document.documentElement.clientWidth; let clientHeight = document.documentElement.clientHeight; let aspectRatio = clientWidth / clientHeight; // 根元素字体 let e = 16; if (clientWidth > pageWidth) { // 认为是ipad/pc console.log('认为是ipad/pc'); e = pageFontSize * (clientHeight / pageHeight); } else if (aspectRatio > pageAspectRatio) { // 宽屏移动端 console.log('宽屏移动端'); e = pageFontSize * (clientHeight / pageHeight); } else { // 正常移动端 console.log('正常移动端'); e = pageFontSize * (clientWidth / pageWidth); } document.documentElement.style.fontSize = `${e}px`; let realitySize = parseFloat(window.getComputedStyle(document.documentElement).fontSize); if (e !== realitySize) { e = e * e / realitySize; document.documentElement.style.fontSize = `${e}px`; } } const handleResize = () => { onResize(); }; window.addEventListener('resize', handleResize); onResize(); return (defaultSize) => { window.removeEventListener('resize', handleResize); if (defaultSize) { if (typeof defaultSize === 'string') { document.documentElement.style.fontSize = defaultSize; } else if (typeof defaultSize === 'number') { document.documentElement.style.fontSize = `${defaultSize}px`; } } }; }; ``` 使用时: ```javascript flexible({ pageFontSize: 100 }); ``` ```css .safe-content { width: 7.5rem; height: 13.34rem; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } ``` 这时，只需要把`safe-content`的`witdh`和`height`写死，就能保证宽高比永远保持为`750 * 1334` 完整页面，点击此处[动态修改rem-预览](http://deepred5.com/single-page/example-js-rem.html) (手机模式查看) 改变屏幕大小，可以看到`safe-content`一直都保持正常的宽高比，并且总是宽度占满(宽度比高度小)或者高度占满(高度比宽度小) 完整代码，直接右键源代码另外一个简化版本 ```javascript (function init(screenRatioByDesign = 750 / 1334) { let docEle = document.documentElement function setHtmlFontSize() { var screenRatio = docEle.clientWidth / docEle.clientHeight; // 7.5 = 750 / 100 (100是设计稿上的1rem大小) var fontSize = ( screenRatio > screenRatioByDesign ? (screenRatioByDesign / screenRatio) : 1 ) * docEle.clientWidth / 7.5; docEle.style.fontSize = fontSize.toFixed(3) + "px"; } setHtmlFontSize() window.addEventListener('resize', setHtmlFontSize) })() ``` 完整页面，点击此处[动态修改rem2-预览](http://deepred5.com/single-page/example-js-rem2.html) (手机模式查看) ## 动态缩放整体页面前面的适配方案，我们都借助了`rem`进行页面的大小缩放。其实我们也可以直接使用`px`进行页面的布局，最后统一使用`js`进行整体缩放 ```javascript function init() { const winWidth = document.documentElement.clientWidth; const winHeight = document.documentElement.clientHeight; const winScale = winWidth / winHeight; const page = document.querySelector('.safe-content'); const pageWidth = 750; const pageHeight = 1334; const pageScale = pageWidth / pageHeight; const origin = '50% 50% 0'; let initialScale = 1; if (winScale > pageScale) { // 宽度长了，但是高度不够 // 高度占满，宽度水平居中 console.log('高度占满，宽度水平居中'); initialScale = winHeight / pageHeight; } else { console.log('宽度占满，高度垂直居中'); // 高度长了，但是宽度不够 // 宽度占满，高度垂直居中 initialScale = winWidth / pageWidth; } page.style.width = pageWidth + 'px'; page.style.height = pageHeight + 'px'; page.style.transform = 'scale(' + initialScale + ')'; page.style.transformOrigin = origin; page.style.left = (pageWidth - winWidth) / -2 + 'px'; page.style.top = (pageHeight - winHeight) / -2 + 'px'; } init(); window.addEventListener('resize', init); ``` ```css .safe-content { /* 布局直接写死成设计稿上的大小 */ width: 750px; height: 1334px; position: absolute; left: 0; top: 0; border: 1px solid red; } .gift-logo { /* 布局直接写死成设计稿上的大小 */ width: 679px; height: 703px; background: url('./img/game-title.png') no-repeat center / contain; } ``` 这时，只需要把`safe-content`的`witdh`和`height`写死，就能保证宽高比永远保持为`750 * 1334` 完整页面，点击此处[动态缩放整体页面-预览](http://deepred5.com/single-page/example-js-scale.html) (手机模式查看) 改变屏幕大小，可以看到`safe-content`一直都保持正常的宽高比，并且总是宽度占满(宽度比高度小)或者高度占满(高度比宽度小) 完整代码，直接右键源代码 ## vw和vh 单屏页面布局时，垂直定位尽可能相对高度进行定位，这时可以选择使用百分比或者`vh` ```scss @use 'sass:math'; @function px2vh($px, $height: 1334) { @return math.div($px, $height) * 100 * 1vh; } ``` 可以封装一个`scss`方法，将测量得到的`px`转换成`vh` ```scss .demo { position: absolute; left: 0; top: 25%; // 垂直定位单位为% top: px2vh(100); // 垂直定位单位为vh width: 100%; height: 1rem; } ``` 如果希望页面的元素在不同的高度下，均能完整展示，可以全部使用`vh`进行布局 ```css .gift-title { width: 25.86vh; height: 4.72vh; background: url('./img/congratulate.png') no-repeat center / contain; } .gift-name { font-size: 2.39vh; } ``` 完整页面，点击此处[vh-预览](http://deepred5.com/single-page/example-vh.html) (手机模式查看) 完整代码，直接右键源代码 ## 总结前面介绍的5种适配方案，可以总结如下: 1. 使用`vw`和`vh`这两个原生的`css3`单位，天然支持宽度和高度的适配：对于需要高度适配的元素，使用`vh`，对于需要宽度适配的元素，使用`vw` 2. `rem`相对宽度计算：划分几个高度区域，对于特定的宽高比，单独进行适配。整体页面还是相对宽度进行缩放，只针对部分宽高比，对页面进行特定的样式改动 3. `rem`动态改变：即可相对宽度，也可相对高度进行计算，此种方案，可以做到**保持设计稿的宽高比例，并尽量占满窗口**的极致效果 4. 不使用`rem`，写死`px`，直接`js`整体缩放页面：此种方案，也可以做到**保持设计稿的宽高比例，并尽量占满窗口**的极致效果对于**保持设计稿的宽高比例，并尽量占满窗口**的效果，可以点击下面的demo进行预览理解: 调整屏幕大小，可以看见页面会上下居中或者左右居中，并且保持宽高比 ![保持设计稿的宽高比例，并尽量占满窗口](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df63fd4d6f0e418daa3f6ca6b2dd84c0~tplv-k3u1fbpfcp-zoom-1.image) * [保持16:9的宽高比-rem动态改变](http://deepred5.com/single-page/flexible.html) * [保持16:9的宽高比-rem动态改变2](http://deepred5.com/single-page/flexible2.html) * [保持16:9的宽高比-整体缩放](http://deepred5.com/single-page/flexible3.html) 源码直接右键查看即可 ## 参考 * [关于移动端适配，你必须要知道的](https://juejin.cn/post/6844903845617729549) * [不要再问我移动适配的问题了](https://segmentfault.com/a/1190000017784801) * [device-aspect-ratio与aspect-ratio单屏布局](https://www.cnblogs.com/lst619247/p/13539590.html) * [翻页H5全分辨率适配最佳实践](https://www.jianshu.com/p/69ecd8ddbf75) * [大屏上的全屏页面的自适应适配方案](https://evestorm.github.io/posts/61674/) * [移动端单屏解决方案](https://www.cnblogs.com/yangzhou33/p/9123998.html) * [移动端单屏解决方案(续)](https://www.cnblogs.com/yangzhou33/p/9136617.html) * [如何打造一个高效适配的H5](https://songyazhao.github.io/2017/02/17/%E5%A6%82%E4%BD%95%E6%89%93%E9%80%A0%E4%B8%80%E4%B8%AA%E9%AB%98%E6%95%88%E9%80%82%E9%85%8D%E7%9A%84H5/) * [全屏HTML5适配个人见解](https://juejin.cn/post/6844903785576267790) * [通过rem布局+media-query:aspect-ratio实现移动端全机型适配覆盖](http://xiaoyuze88.github.io/blog/2015/05/12/%E9%80%9A%E8%BF%87rem%E5%B8%83%E5%B1%80+media-query%E7%9A%84aspect-ratio%E5%AE%9E%E7%8E%B0%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%85%A8%E6%9C%BA%E5%9E%8B%E9%80%82%E9%85%8D%E8%A6%86%E7%9B%96)