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

MonoLog 发布于2019-08-30 15:55 / 2888人阅读

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。

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

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

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

一、四年前我的方案

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

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

（320*480）宽/高=0.66 iphone4

（480*800）宽/高=0.6 三星多款和一些安卓

（750*1334）宽/高=0.56 iphone6

设置背景图的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://github.com/1897890924...

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

云手机 api设计的最佳实践最佳实践 webrtc最佳实践 cdn最佳实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117334.html

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

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

joyvw 2019-08-02 14:14 评论0 收藏0
开发H5时背景照片兼容不同手机屏幕处理的最佳实践

摘要：翻页的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在背景图上的处理相当要注意。设置背景图的是生成图片会是这样的效果比例的手机裁切的是靠下的部分，而比例的手机裁切的是靠右的部分。最近在重新做过去常做的翻页H5，关于背景图有些新的经验心得分享。翻页H5的背景图通常是要求全屏的。这里就存在一个问题，目前市面上的手机屏幕比例非常的不统一，这导致在...

kamushin233 2019-08-05 16:11 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
视频H5 video标签最佳实践

摘要：目前的同层播放器只在包括微信上生效，暂时不支持。安卓微信浏览器是内核，一些属性标签比如就不支持，所以始终全屏。参考文章移动端视频的兼容，去除播放控件全屏等视频标签在微信里的坑和技巧移动端视频播放优化实践微信端视频播放问题 showImg(https://segmentfault.com/img/remote/1460000009395292);随着 4G 的普遍以及 WiFi 的广泛使...

宠来也 2019-08-05 11:16 评论0 收藏0