今天做了個pc的頁面，看了別人的網站在手機端能把pc端的網頁剛好縮放到手機端，看着很舒服。
於是想把自己的頁面也這樣搞一下，剛開始，想到的是利用css3的縮放來做，想的是當屏幕尺寸改變時縮放整個頁面，這樣順便寫了個代碼，但是在手機端卻沒有效果，然后仔細一想，手機端屏幕是不會變化的，根本無法觸發window.onresize方法，再說，這樣做了之后，在pc端改變屏幕尺寸后，頁面是跟着縮放的，但是別人的網站在pc端改變屏幕尺寸時，是不會變化的，所以這樣做肯定是錯誤的。
然后開始百度，看到一條評論，只需要把下邊這段代碼去掉就行了
<meta name="viewport" content="width=device-width,initial-scale=1.0">
！！！
試了一下，在頁面中寫的一個width=1200px的元素，能夠恰到其份的適配下來！！！縮放的剛剛好
下面來了解一下meta標簽中這些值的含義：
width=device-width：表示布局viewport的值是設備的寬度（也可以是特定的viewport值）
initial-scale=1.0： 設置頁面的初始縮放比例
minimum-scale=1.0： 設置頁面的最小縮放比例
maximum-scale=1.0：設置頁面的最大縮放比例
user-scalable=no： 設置用戶是否可以縮放操作
移動端默認會縮放大尺寸的頁面的，當我們把上述代碼去掉之后，就會隨着移動端縮放的比例走，而且還可以自由放大。
下面是另一篇文章會對meta標簽加深理解：號稱---------JavaScript實現移動端頁面按手機屏幕分辨率自動縮放的最強代碼
<script>
var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750;//除以的值按手機的物理分辨率
var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); // andriod 2.3
if (version > 2.3) { document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">'); // andriod 2.3以上
} else { document.write('<meta name="viewport" content="width=device-width,user-scalable=no">'); } // 其他系統
} else { document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">'); } </script>
上面代碼是專門針對移動端設置的meta標簽縮放比例，根據設計圖寬度的不同而設置的（這樣的設置並不適合我的情況，因為這樣設置了之后，在手機端是不能縮放的，因為上面代碼寫死了縮放比例）。
然后自己又試了試，把元素尺寸寫的更大一些，當我寫1800px時，手機端到450px時就不能再縮小了，當我寫1200px時，手機端到300px就不能再縮小了，所以手機縮放也有一定的極限值，
我暫且認定手機端能夠將大尺寸元素縮小4倍。那么，一般的手機不會低於300px；那么一般手機就能夠把1200px的元素完好縮放到手機上，終於明白了為什么大多數設計圖，固定尺寸為1200px，原來是這樣的道理。
那么，我們要向將pc端的頁面能夠在手機端完好縮放，我們就需要將pc端的能容寬度固定在一個值之內，我選擇將內容裝在1200px的元素內，這樣就可以讓pc端網頁在移動端完好縮放了。