開發H5時背景照片兼容不一樣手機屏幕處理的最佳實踐

最近在從新作過去常作的翻頁H5，關於背景圖有些新的經驗心得分享。

翻頁H5的背景圖一般是要求全屏的。這裏就存在一個問題，目前市面上的手機屏幕比例很是的不統一，這致使在背景圖上的處理至關要注意。

一般我會以600*1000這個比例來選擇或者設計（好記，PS輸入方便，比例適中）背景圖，譬如這樣一張美女背影圖：（讓我看見大家的雙手，不要往褲襠伸！）

1、四年前個人方案

3、四年的手機相對尚未那麼多瘦長的譬如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%左右，勉強能夠接受。

能夠看下效果，中間是實圖比例，左邊壓扁，右邊拉長：

（反正若是實際是這三款背景的姑娘我都要了！）

2、若是如今仍是用同樣的方案

然而到了今天，忽然冒出來愈來愈多像iPhone X這樣的瘦長款手機，若是按照原來的方案，要取中間值的比例來作背景圖，將會是這樣的效果：

最右邊是iPhone X上的拉伸：

最右邊這樣的背影怕是一抱就會斷的感受

這已是明顯不能接受的畸形了。固然爲了適應iPhoneX這樣的手機，若是以舊方案來設計背景圖，可能使用的標準圖片的比例應該大約是600*1050的尺寸會更好些。

不過不管怎麼說，這個區間的極值會讓即使中間比例的照片都會帶來不能容忍的拉伸比例。

3、裁切解決

因而考慮從裁切的方式來解決，css3裏的background-size有一個cover屬性，就是用來處理背景的裁切：把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。

設置背景圖的css是：

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

生成圖片會是這樣的效果：

iPhone4比例的手機裁切的是靠下的部分，而iPhone6/iPhoneX比例的手機裁切的是靠右的部分。這帶來一個新問題：很容易把照片的關鍵元素裁切掉，譬如已經在iPhoneX上看不到美女的右邊胳膊。

4、裁切，並保持背景圖顯示中心位置

這時咱們能夠利用background-position來實現圖片的裁切從四周開始。

設置背景圖的css是：

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

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

那麼咱們在構圖時有什麼考慮呢？

5、選擇（設計）圖片時構圖

我又作了個頁面把構圖作成示意圖：

整張圖片是設計圖，藍色部分是會被裁切掉上下部分顯示在iPhone4比例的手機上，而紅色部分是會被裁切掉左右顯示在iPhoneX比例的手機上：

看完這個圖，你應該能知道在設計或選擇圖片時，只要將必須顯示的元素放在紅藍重疊的地方（人物中的胸啊，臉啊，臀啊），就能保證在任意手機上，照片上的關鍵元素都不能丟失。

全部效果都作成了html放在了個人github項目上：

https://github.com/1897890924...

同發個人我的博客 https://sxg.kuashou.com