📱 移动端整屏背景图前端适配

1. 任务

接了一个简单的静态页，效果如图所示（内容涉及到公司隐私，已马赛克） 效果图 起初UI提供的背景图片是这样的 背景图片

2. 踩坑

二话不说，拿过来就干，结果最后调适配的时候BBQ了。

手机屏幕偏长的机型，background-size:cover左右显示不全图片

BBQ1 BBQ2
手机屏幕偏宽的机型，background-size:contain左右留有空白 BBQ3 BBQ4

但background-size:100% 100%，不同手机机型，背景图片会被拉伸变形。

3. 如何解决这个尴尬的问题呢？

• 先让设计提供一个完整的背景图，中间白色区域是研发用代码来实现；
• 在设置背景图片后，也设置背景颜色，这样对于机体较长的机型就不至于底端背景缺失一块；
• 这么一来就做到了 既不拉伸图片又可以完全展示~

background-image: url(...);
background-size: 100% auto;
background-repeat: no-repeat;
background-color: #1fb9ff;

设计又提供的背景图片 最优解

4. 温馨提示

最后提醒一下大家，由于UI团队不一定都懂静态页编码，所以她们提供的图片也是需要研发来推敲的，移动端开发最主要就是适配的问题。如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。