阅读 2159

等比适配的最后一个补丁

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

一、缺陷是什么?

既然是等比适配,那么只能以容器的一边为基准,另一边等比,通常情况我们都是以宽度进行等比(例如,通过 Viewport 将容器宽度固化成 750,然后在设计稿中高效的量多少写多少的进行开发)。

在大多数情况下,这种方案都合理高效,虽然高度在不同宽高比的容器中可能会超出,但是通常我们的页面都可以纵向滚动,超出又何妨。但是,如果产品说这个页面不能滚呢?必须让用户一屏看完所有内容!!!

OK,之前的文章我给过方法:怼设计! “像这种需要一屏显示完全的页面,就应该将主体内容放在安全区域啊,这样短屏不会看不到主体内容不是”

示图一
可是,设计师可也不是吃素的,分分钟怼回来: “这么做你倒是省事了,但是在正常宽高比的手机上(例如 iphone 6/7/8),会空出来一大片,更别说在 iphone XXX 上了!”

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

二、有无解法

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

示图二
正常比例屏幕,内容刚好占满,短屏中可能 Company 就看不见了:
示图三

如果在保证正常屏幕按照宽度等比适配的同时,短屏再依据高度进行一次等比缩放会怎样呢?

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

三、具体落地

1)首先,正常的按照宽度等比适配的方案,该怎么实施还怎么实施,毕竟要保证正常宽高比的效果不是,我们只需要在此基础上做一个小小的加成(所以说是打补丁洛)

2)获取屏幕的宽高,比较它跟设计稿的宽高比孰大孰小(设计师一般都是按照750出的图,也就是iphone6/7/8 上的,375:667),如果

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

也就说,这个屏幕的高度是偏矮的(这里理解不了,自行脑补一下),这就找到了我们要处理的战场

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

关注下面的标签,发现更多相似文章
评论

查看更多 >