http://www.mamicode.com/info-detail-864013.html

標籤：

網上關於這方面的文章有很多，重複的東西本文不再贅述，僅提供思路，並解釋一些其他文章講述模糊的地方。

1、使用meta標籤，這也是普遍使用的方法，理論上講使用這個標籤是可以適應所有尺寸的螢幕的，但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。

首先解釋該標籤的含義：

<meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

如果你完全不瞭解這個標籤的使用需要先百度一下。

解釋：content中的“width” 這個width指的是什麼寬度，我看過的文章對這個都沒有解釋的很清楚，有幾個備選：虛擬視窗的寬度、手機螢幕的寬度、還是頁面的寬度等等？經試驗這個指的是虛擬視窗的寬度。瞭解寬度之後，對後續的各種scale，就應該知道是誰與誰的比例，是 虛擬視窗寬度 / 頁面寬度，這樣就會有問題出現安卓裝置尺寸差異很大光主流的就有寬度為 320 480 720 1080 等各種尺寸而以上標籤只能支援一種尺寸，當然有些瀏覽器會自動縮放使其適應螢幕，但這不是統一標準，正確的做法是用js動態生成此標籤，當然，應該先獲取螢幕尺寸。

1. <script type=“text/javascript”>  
2.     var phoneWidth =  parseInt(window.screen.width);  
3.     var phoneScale = phoneWidth/640;  
4.     var ua = navigator.userAgent;  
5.     if (/Android (\d+\.\d+)/.test(ua)){  
6.         var version = parseFloat(RegExp.$1);  
7.         if(version>2.3){  
8.             document.write(‘<meta name=”viewport” content=“width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi”>‘);  
9.         }else{  
10.             document.write(‘<meta name=”viewport” content=“width=640, target-densitydpi=device-dpi”>‘);  
11.         }  
12.     } else {  
13.         document.write(‘<meta name=”viewport” content=“width=640, user-scalable=no, target-densitydpi=device-dpi”>‘);  
14.     }  
15. </script>  

    <script type="text/javascript">
        var phoneWidth =  parseInt(window.screen.width);
        var phoneScale = phoneWidth/640;
        var ua = navigator.userAgent;
        if (/Android (\d+\.\d+)/.test(ua)){
            var version = parseFloat(RegExp.$1);
            if(version>2.3){
                document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);
            }else{
                document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);
            }
        } else {
            document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);
        }
    </script>

對於此標籤還有以下需要分享：

1)、user-scalable=no就一定可以保證頁面不可以縮放嗎？NO，有些瀏覽器不吃這一套，還有一招就是minimum-scale=1.0, maximum-scale=1.0 最大與最小縮放比例都設為1.0就可以了。

2)、initial-scale=1.0   初始縮放比例受user-scalable控制嗎？不一定，有些瀏覽器會將user-scalable理解為使用者手動縮放，如果user-scalable=no，initial-scale將無法生效。

3)、手機頁面可以觸控移動，但是如果有需要禁止此操作，就是頁面寬度等於螢幕寬度是頁面正好適應螢幕才可以保證頁面不能移動。

4)、如果頁面是經過縮小適應螢幕寬度的，會出現一個問題，當文字框被啟用（獲取焦點）時，頁面會放大至原來尺寸。

以上是使用viewport標籤的一些小體會，分享給大家。

3、百分比法，首先應明確一個概年，CSS中的百分比中的百指的是什麼，我告訴你指的是父元素，所有百分比都是這樣的。子元素寬度50%，那麼父元素的寬度就是百，子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那麼父元素的高是百。所以body預設寬度是螢幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這隻適合佈局簡單的頁面，複雜的頁面實現很困難。

4、使用css3單位rem，有人這樣解釋rem，root-em，就是根部的em，想必em大家都懂的，那麼rem就是將根節點html的font-size的值作為整個頁面的基準尺寸，預設html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設為2rem。當我們把html的font-size設為20px時，1rem=20px，那麼32px=1.6rem了。到這裡我們也就瞭解了rem的用法了，那麼怎麼用rem來實現不同尺寸螢幕的自適應呢？在頁面載入開始時首先判斷window的寬度（是window的寬度($(window).width())，不是螢幕分辯率的寬度（screen.width），兩者的差別請自行查閱），假設寬度為W，一個div在寬度為640px的設計稿的下的寬度為dW1，這樣如果html的font-size為100px，那麼這個div的寬度用rem表示是多少呢？計算：div寬度dW2=dW1/100,px與rem之間很好換算，除以100就可以，這是假定螢幕寬度為640的，而不同寬度的螢幕怎麼處理，為了能保證換算容易那就要為html設定一個合適的font-size，計算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

解釋一下為什麼把100作為一個縮放比例，用10或1不是更方便嗎，這是因為大多數瀏覽器font-size的最小值為12px，所以只能用100了。所以會在頭部加上這個JS程式碼

1. <script type=“text/javascript”>  
2.    var html = document.querySelector(‘html‘);  
3.    var rem = html.offsetWidth / 6.4;  
4.    html.style.fontSize = rem + ”px”;  
5. </script>  

<script type="text/javascript">
   var html = document.querySelector(‘html‘);
   var rem = html.offsetWidth / 6.4;
   html.style.fontSize = rem + "px";
</script>

5、媒體查詢，媒體查詢也是css3的方法，我們要解決的問題是適應手機螢幕，這個媒體查詢正是為解決這個問題而生，媒體查詢的功能就是為不同的媒體設定不同的css樣式，這裡的“媒體”包括頁面尺寸，裝置螢幕尺寸等，比如我們要為寬度小於480px的頁面中的class=”icon”的元素設定樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};這裡僅介紹這種思路，關於媒體查詢的詳細用法請參閱css手冊。

綜上，至今，我沒有找到一種完全適應各種螢幕的方法，只能根據頁面特點選擇不同的方法，多種方法靈活運用，才是王道。