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

joyvw 發布于2019-08-02 14:14 / 2381人閱讀

摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在背景圖上的處理相當要注意。設置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。

最近在重新做過去常做的翻頁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

云服務器 GPU云服務器 api設計的最佳實踐最佳實踐 webrtc最佳實踐 cdn最佳實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53666.html

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

摘要：翻頁的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在背景圖上的處理相當要注意。設置背景圖的是生成圖片會是這樣的效果比例的手機裁切的是靠下的部分，而比例的手機裁切的是靠右的部分。最近在重新做過去常做的翻頁H5，關于背景圖有些新的經驗心得分享。翻頁H5的背景圖通常是要求全屏的。這里就存在一個問題，目前市面上的手機屏幕比例非常的不統一，這導致在...

MonoLog 2019-08-30 15:55 評論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