等比适配的最后一个补丁

时间 2019-11-30

标签等比适配最后一个补丁繁體版

原文原文链接

此前分享过两篇关于等比适配的文章（Viewport And Rem），分别介绍了按照宽度进行等比适配的两种具体实。然而，按照宽度等比适配这个方案自己并不完美，今天就来讨论讨论如何打上这个补丁css

1、缺陷是什么？

既然是等比适配，那么只能以容器的一边为基准，另外一边等比，一般状况咱们都是以宽度进行等比（例如，经过 Viewport 将容器宽度固化成 750，而后在设计稿中高效的量多少写多少的进行开发）。html

在大多数状况下，这种方案都合理高效，虽然高度在不一样宽高比的容器中可能会超出，可是一般咱们的页面均可以纵向滚动，超出又何妨。可是，若是产品说这个页面不能滚呢？必须让用户一屏看完全部内容！！！安全

OK，以前的文章我给过方法：怼设计！ “像这种须要一屏显示彻底的页面，就应该将主体内容放在安全区域啊，这样短屏不会看不到主体内容不是” bash

但是，设计师可也不是吃素的，分分钟怼回来： “这么作你却是省事了，可是在正常宽高比的手机上（例如 iphone 6/7/8），会空出来一大片，更别说在 iphone XXX 上了！”

怼是怼不过的了，那只能想办法解决，经过计算屏幕的宽高比，在短屏上动态的缩小一些间距是一种方法，不过这实在实在是太费劲了！！！微信

2、有无解法

既然离散的调整区域间距这么痛苦，有必要探索一个“短平快”的路径。不难发现，这类不让用户纵向滚动的页面，一般都是元素较少统一背景的运营封面，例如这样的： iphone

正常比例屏幕，内容恰好占满，短屏中可能 Company 就看不见了：

若是在保证正常屏幕按照宽度等比适配的同时，短屏再依据高度进行一次等比缩放会怎样呢？ post

对主要内容的高度进行收缩，让它等于容器高度，此时宽度等比收缩，总体内容在往上收的同时，会向内挤。因为背景固定，这类运营页面往里挤一点设计师也能接受，毕竟只是针对一些变态的短屏的降级（总比超出看不到，或者拉低正常屏的体验效果进行对齐，要好百倍，毕竟短屏通常也不会短得太夸张，横向的收缩不会太明显）

3、具体落地

1）首先，正常的按照宽度等比适配的方案，该怎么实施还怎么实施，毕竟要保证正常宽高比的效果不是，咱们只须要在此基础上作一个小小的加成（因此说是打补丁洛）spa

2）获取屏幕的宽高，比较它跟设计稿的宽高比孰大孰小（设计师通常都是按照750出的图，也就是iphone6/7/8 上的，375：667），若是设计

屏幕宽高比 > 设计稿宽高比
复制代码

也就说，这个屏幕的高度是偏矮的（这里理解不了，自行脑补一下），这就找到了咱们要处理的战场3d

3）保证页面主内容是有一个标签包裹的(PS: 这里不包括背景)，而且，主内容区域的高宽已经固定为设计稿的高宽

<style> .mainContent { width: 750px; heigh: 1080px; } </style>
<body class="bg"> // 统一的背景色、背景图在这里，注意注意
  <div class="mainContent"> // 主内容都被这里裹着呢
    ...  
  </div>
</body>
复制代码

4）计算缩放的 Scale，对 MainContent 设置 scale

// 伪代码，不可抄、不可抄
  const scale = containerHeight / mainContentHeight
  if (shortScene) {
    mcRef.setStyle({
      transform: `scale(${scale}, ${scale})`
    })
  }
复制代码

写完收工~~

结语

虽然文中用了很多感叹号，可是我毕竟是一个温和之人，欢迎加微信一块儿聊技术：facemagic2014