填移動端坑系列一——如何讓h5頁面完美整屏顯示

原創喲，轉載請附上本文鏈接(http://www.cnblogs.com/AliceX-J/p/6707908.html)，做者 印前

後續更簡單

前言：

最近讓作一個h5的活動專題，便讓我浩浩蕩蕩進入移動端大坑中。

引言：

設計美女作iPhone6的設計圖。要求整屏滑動，相似易企秀作的事了。這時我選擇了[swiper](http://www.swiper.com.cn/)框架作個人頁面滑動。

問題描述：

那麼問題來了，如何讓這份設計圖在不拉伸的狀況下完美地在各個移動端設備上整屏呈現呢？

看下圖紅色框區域，須要我展現徹底，又在同一屏中，不能有拉伸，還要適應在各類屏幕尺寸，該怎麼呢？？？

摸索插曲：

最開始我想讓整張圖一塊兒展現，最後我終於驚醒，整張圖整屏，是在這樣的條件下作不到的。

終於想到換種思路，背景若是是圖片，在設計師的溝通下又是能夠拉伸的。

/*背景圖片*/
    .bg {
     background: url(xxx.png/jpg) no-repeat;
     background-size: 100%;
    }

如今主要是讓內容在不拉伸的狀況下，徹底展現出來。
如今流行的作法是用rem根據屏幕寬度來進行適配，具體作法原理將在該系列下一部分解釋。
這樣會致使個人頁面內容雖然根據屏幕寬度改變了，但忽然發現個人娘娘只剩半截了，其餘部分都跑到屏幕下面了。。。

頭又大了。。。。。個人娘娘啊 。。。。

深究緣由

如今集中精神考慮，究竟什麼問題致使的呢?
聰明的小夥伴們可能都想到了， 個人手機屏幕又不是根據iphone6屏幕寬高按比例放大縮小的。。。。。。嗯，就是它了，緣由是不一樣手機屏幕的寬高比例是不一樣的。

問題找到了，那麼該如何解決呢？？？（穿插點心靈雞湯，每一個人都能發現一些問題，但咱們要找到源頭想辦法解決它！)

解決方案

終於在我通過蹩腳的數學計算後找到一種方法。有更好方法的歡迎聯繫我喲。

首先觀察設計圖一屏內容是高度尺寸更長呢？仍是寬度的尺寸更長呢？

咱們要讓更長的獲得完美展現，更短的天然也能夠同比展示出來，好像是這道理吧，來點三腳貓數學功夫。
iphone6(寬高比) = iphone6Width(375)/iphone6Height(667) =（約等於）0.56

若要讓在iphone6的內容完美呈現，應該以該比例來放大縮小。
好比在ipad上，768/1024，它的比例是0.75，此時娘娘就顯示不完了。爲何呢？
由於： 根據rem的基礎值通常會根據屏幕的寬度和基準iphone的寬度按比例縮放，此時768/375=2.048，那麼此時整個頁面要放大2.048倍，高度也要放大2.048倍也就是2.048*667=1366.016。

清楚了嗎 ，此時放大後的屏幕尺寸1366.016 > 1024 那麼，娘娘的腳就只能在滾動下一屏才能看見了。

那爲了露出娘娘的腳，咱們該如何縮放呢？

當屏幕寬高比>0.56（iphone6的屏幕寬高比時）咱們就得依照iphone6的高度來縮放，縮放比例應該爲1024/667(約等於)=1.535，再根據放大1.535獲得此時設計圖放大後的屏幕寬度1.535*375=575.625。

此時心亂沒呢？哎呀，575.625比ipad的寬度768更小的嘛，這時就爲整個容器加上padding-left(768-575.625)/2。全部留邊居中顯示，背景又是滿屏填充。我以爲知足要求了。

那麼有人會提出疑問了，若是屏幕寬高比<0.56時呢？此時就該根據寬度來縮放啦。。。

最後貼上代碼

//使用jQuery
    var windowHeight = window.innerHeight;
    var windowWidth = $(window).width();
    var screenScale = windowWidth / windowHeight;

    if (screenScale > 0.56){
        document.documentElement.style.fontSize = windowHeight * 0.56 / 10 + 'px';//設置html font-size基準值
        
        // 此時計算寬度比實際寬度更小，爲使內容居中
        $('.wraper').css({"padding-left":windowHeight * (screenScale - 0.56)/2});
    }else {
        document.documentElement.style.fontSize = windowWidth / 10 + 'px';
    }

後續

其實更簡單的是 background-size: cover屬性， 能讓圖片在不拉伸的狀況下 最大限度縮放圖片以填充容器。
我以爲原理更本身折騰出來的相似，但有另外一種更易理解的方式解釋：

第一種狀況： 圖片寬高都需放大

1. 若圖片寬度爲400px， 容器寬度爲500px, 若按寬度縮放，要將圖片放大1.25倍；
2. 若圖片高度爲200px, 容器高度爲400px, 若按高度縮放， 要將圖片放大2倍；
   顯然若按圖片寬度縮放，那不能將圖片放大至填充滿整個容器。 結論就是 哪條邊放大倍數更大，即按此倍數縮放整張圖片。

第二種狀況： 圖片需縮小

1. 若圖片寬度400px, 容器寬度200px, 若按寬度縮放，要將圖片放大0.5倍； 2.若圖片寬度200px, 容器寬度爲150px,若按高度縮放，要將圖片放大0.75倍； 結論同第一種狀況，計算規則都得是容器寬度/圖片寬度, 根據放大倍數大的來縮放。