原創喲，轉載請附上本文連接(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屬性， 能讓圖片在不拉伸的情況下 最大限度縮放圖片以填充容器。
我覺得原理更自己折騰出來的類似，但有另一種更易理解的方式解釋：
第一種情況： 圖片寬高都需放大
- 若圖片寬度為400px， 容器寬度為500px, 若按寬度縮放，要將圖片放大1.25倍；
- 若圖片高度為200px, 容器高度為400px, 若按高度縮放， 要將圖片放大2倍；
顯然若按圖片寬度縮放，那不能將圖片放大至填充滿整個容器。 結論就是 哪條邊放大倍數更大，即按此倍數縮放整張圖片。
第二種情況： 圖片需縮小
- 若圖片寬度400px, 容器寬度200px, 若按寬度縮放，要將圖片放大0.5倍；
2.若圖片寬度200px, 容器寬度為150px,若按高度縮放，要將圖片放大0.75倍；
結論同第一種情況，計算規則都得是容器寬度/圖片寬度, 根據放大倍數大的來縮放。