wap 横屏适配和竖屏适配的通用方案

话题起因:

这个话题应该能聊的东西挺多的，从16年做手机端开始就研究，也写了两篇博客来记录过（但是受限于但是的经验和认知，现在看起来不是特别清晰）。

为什么今天会继续这个话题呢，在做了reactnative和之前小游戏横屏页面后，我觉得有必要总结一下。

本篇博客，最终针对wap横屏和竖屏给出两个通用的适配方案，rn上面可能实现方式和web的不大一样，但是思路逻辑是一样的。

从生产流程说起:

从生产流程来考虑，适配这个东西，产品经理和设计都是需要考虑的，相对传统pc设计，移动端能展示的区域比较小。

这个就要求设计出来的产品（后面都简称[产品]），必须要简单明了，突出重点，让用户一目了然，让目标用户一眼就能找到自己要的东西。

简单明了：不能更pc那样堆叠内容，必须让用户能够轻松愉悦的状态，打开产品就能看到我们推送给用户的东西

移动设备尺寸丰富，特别是安卓上面更新一个品牌好几个屏幕尺寸，这要求设计必须流出来足够的空间来做适配，否者东西可能会挤成一团无法阅读。

可能有人会说，对一个技术来说，有必要对产品经理和设计提需求么？

调教产品经理和激射师就这么来劲？

并不是的，在生产line上面，每个步骤的很重要。

一步出错，步步错。

初次进入公司时候，可能会拿到一些很”糟糕“的设计稿，这个可以忍，毕竟之前也没有共同工作过。

但是，之后呢？即使为了自己，也有必要和设计师沟通，告诉他我们的期待，以及这样做的好处。

这是利人利己的事情。

我们：收获一个舒服的工作环境，不必要搞奇奇怪怪的适配。

设计：收获一个好的建议，对他来说也是一个成长。

产品：收获一个良好的作品

及时沟通，及时表达我们的需求，这个非常重要！！

总结上面:

我们的设计稿需要扁平化、有适配的空间
及时加入项目(最好在立项到出设计稿过程中能和设计师沟通)，提出我们的需求

下面进入技术环境:

首先在页面头部加入这个头部信息:

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

它在wap环境下会把页面强制缩放等同设备屏幕可见网页【宽度】

竖屏设计稿

使用rem，根据设计稿的宽度和屏幕的宽度得到缩放比例

思路:我们希望html的字体大小为100px,

手机端默认字体大小为16px，（100%16）*100%等于625%，

假如当前设备网页可见宽度为640：

（( 640/750)*625%=533.3333333333333%

所以设置html的font-size为625%，这里是拿设备的网页可视跨度和设计稿的宽度来做比例后，得到100px缩放后的实际大小，就是默认字体大小的533%

如果我们还有一个期待，如果设备的网页可视宽度大于设计稿的宽度时候，还是期待按照设计稿的大小来，那我们就把拿到的设备网页可视宽度替换为设计稿的宽度

代码如下:

(function() {var designW=750;function setFontSize(k) {document.documentElement.style.fontSize =((((k / designW) * 100) / 16) * 100) + '%';}function initRem() {var W = document.documentElement.clientWidth;var H = document.documentElement.clientHeight;if(W < H) {// console.log("竖屏");W=W>designW?designW:w;setFontSize(W);} else {// console.log("横屏");H=H>designW?designW:H;setFontSize(H);}}window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', initRem, false);document.addEventListener('DOMContentLoaded', initRem, false);})();

Css 代码:设计稿上面的10px，写成0.1rem;就可以了，因为1rem等于100

那如果是横屏设计是否可以使用rem么?

不合适

因为横屏需要考虑宽高，而不只是设计稿的宽度和设备网页可视区的宽度
rem是依赖html字体的，他是有限制的，移动端字体最小12，设置小于12的值，最终渲染也会是12px，在只考虑宽度比例下问题不大，及时有问题也可以用css缩放来取巧处理。横屏设计下，12px限制带来的问题会无限的放大（只有亲自去试过才知道，这里不举例）；
上面说得`12px限制`，是指你给html设置了11px时候，你使用2rem，实际上得到的是12px*2,而不是11px*2

Css变量做适配的好处:

1.不受限字体12px限制

2.同一个页面的html标签可以挂载多个不同的css变量

横屏设计相对竖屏设计需要考虑宽高两个条件限制

按照宽去计算比例，这个比例
如果1的比例去计算实际的高如果大于设备网页可见高度的高，那就用高去算比例

另外：

在横竖屏两种情况下需要对内容容器做旋转处理，需要考虑节流（快速旋转手机方向，只处理最后一次）
竖屏下，网页内容的高并不是设备网页可见高度而是设备网页可见宽度
input获取焦点，键盘推出后，设备网页可见高度的宽高比变了吗，是否需要做适配

基于以上考虑我提供了一个vue开发的横屏适配包vue-horizontal-screen，这里就不讲述实现了，可以对着以上的需求去看这个包的github代码

react的话可以参考后面从vue-horizontal-screen移植过来的 react-horizontal-screen

在线demo

更新 2022-2-8

因为没有时间分别维护vue和react两个版本，我抽离了核心代码后，把vue和react合并到了同一个库 horizontal-screen-web 并且改成了组件的方式。因为这样可以抹平vue和react的接口差异

再次总结:

1.竖屏使用rem通用方案

2.横屏设计稿，使用css变量通用方案，vue和react横屏可以使用博主提供的第三方包，它的实现代码并不难，也可以自己手写

3.这里的通用方案的意思是：可以像传统开发pc，使用px那样的思路去做布局和适配，思维上不需要作出太大的变化