开发H5时背景照片兼容不同手机屏幕处理的最佳实践

最新推荐文章于 2022-07-12 17:56:40 发布

weixin_34391854

最新推荐文章于 2022-07-12 17:56:40 发布

阅读量787

点赞数

原文链接：https://segmentfault.com/a/1190000018106697

版权

最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。

翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。

通常我会以600*1000这个比例来选择或者设计（好记，PS输入方便，比例适中）背景图，譬如这样一张美女背影图：（让我看见你们的双手，不要往裤裆伸！）

三、四年的手机相对还没有那么多瘦长的譬如iPhone7尤其是iPhoneX的时候，我的解决方法是容忍适度的拉伸。

当时常见的手机屏幕比例：

设置背景图的css是：

  .img{
    background-image:url('slide.jpg');
    background-size:100% 100%;
  }

如此一来，宽/高=0.6比例的手机将完美显示，而更扁的手机如iphone4背景图会有横向拉伸，更瘦长如iphone6则是纵向拉伸。计算一下，拉伸率最高是11%左右，勉强可以接受。

可以看下效果，中间是实图比例，左边压扁，右边拉长：

（反正如果实际是这三款背景的姑娘我都要了！）

然而到了今天，突然冒出来越来越多像iPhone X这样的瘦长款手机，如果按照原来的方案，要取中间值的比例来做背景图，将会是这样的效果：

最右边是iPhone X上的拉伸：

最右边这样的背影怕是一抱就会断的感觉

这已经是明显不能接受的畸形了。当然为了适应iPhoneX这样的手机，如果以旧方案来设计背景图，可能使用的标准图片的比例应该大约是600*1050的尺寸会更好些。

不过无论怎么说，这个区间的极值会让即便中间比例的照片都会带来不能容忍的拉伸比例。

于是考虑从裁切的方式来解决，css3里的background-size有一个cover属性，就是用来处理背景的裁切：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

设置背景图的css是：

  .img{
    background-image:url('slide.jpg');
    background-size:cover
  }

生成图片会是这样的效果：

iPhone4比例的手机裁切的是靠下的部分，而iPhone6/iPhoneX比例的手机裁切的是靠右的部分。这带来一个新问题：很容易把照片的关键元素裁切掉，譬如已经在iPhoneX上看不到美女的右边胳膊。

这时我们可以利用background-position来实现图片的裁切从四周开始。

设置背景图的css是：

  .img{
    background-image:url('slide.jpg');
    background-position:center;
    background-size:cover
  }

加了背景的定位，会让背景在裁切中保持居中的裁切效果：

那么我们在构图时有什么考虑呢？

我又做了个页面把构图做成示意图：

整张图片是设计图，蓝色部分是会被裁切掉上下部分显示在iPhone4比例的手机上，而红色部分是会被裁切掉左右显示在iPhoneX比例的手机上：

看完这个图，你应该能知道在设计或选择图片时，只要将必须显示的元素放在红蓝重叠的地方（人物中的胸啊，脸啊，臀啊），就能保证在任意手机上，照片上的关键元素都不能丢失。

所有效果都做成了html放在了我的github项目上：

同发我的个人博客 https://sxg.kuashou.com

关注