簡易版viewport

首先這裏涉及到虛擬像素和物理像素，不論是移動設備仍是pc都存在這個概念
一、在顯示器精度還不是很高的年代，一個物理像素就等於一個虛擬像素，1000px的網頁就佔據了1000的物理像素（若是你玩太小霸王，對這個應該有很直觀的影響，上面的人物都是一個格子一個格子組成的）
二、隨着顯示器精度的不斷提升，同等面積上能容納多個物理像素點，若是還按照一個物理像素顯示一個虛擬像素的話，1000px的網頁看上去就會縮成一團
三、這樣的網頁顯然無法看，爲了解決這個問題，顯示器生廠商把一個虛擬像素等同於了多個物理像素（這就至關於建立了一個虛擬的中間層，這個中間層向上對接網站中的像素，向下對接顯示器的像素），這樣網頁就不會縮成一團了

理解了上面幾點才能理解爲何會有viewport（viewport也就至關於建立了一個虛擬的中間層）
一、移動設備出來以前，網站都是針對電腦設置的，寬度起碼都在七八百像素以上
二、移動設備的顯示屏幕要比電腦小不少，若是要在上面瀏覽網站確定會出現橫向豎向的滾動條
三、爲了讓以前作的網站能在手機上正常顯示（指不出現橫向豎向滾動條），就須要建立一箇中間層，因而蘋果首先在Safari上建立了一個viewport屬性
四、這個viewport就是虛擬的中間層，稱爲Layout Viewport（蘋果設置這個中間層的寬度爲980px，也能夠是其餘值，這由設備本身決定，根據項目經驗我的認爲這個值不固定，實際多大要看網頁尺寸，當設置100%時就是980px，若是某一行元素超過了980px，超出的部分依然會縮到屏幕裏去，可是設置100%的那行就不會撐滿整行，980px之外的地方會顯示空白），手機瀏覽器讓這個中間層填滿手機屏幕，不出現滾動條，最後再把網頁渲染在這個中間層上，這樣pc站就以縮小的形式完整的呈如今手機上了，帶來的反作用就是字看不清了，必須經過手工放大才能看清
五、後來出現了針對移動端製做的網站，問題隨之出現，網頁被渲染到這個中間層上了，而這個中間層是專門爲pc站而生的，因而就出現了這樣一種狀況，1000px的網頁以縮小的方式完整的顯示在屏幕上了，300px的移動網站一樣以縮小的方式顯示在屏幕上，剩下的700px就是空白了，太醜了
六、爲了解決這個問題viewport中加入了幾個屬性，專門用來處理爲手機作的移動站，width=device-width, initial-scale=1.0, user-scalable=no，意思就是讓這個中間層的寬度等同於設備的寬度，而不是那個中間層的寬度，這樣移動站就能完美顯示了

經過上述分析，能夠得出如下結論：
當pc站不加viewport時，在電腦上能看到一個完整清晰的網站，在手機上會顯示一個縮小的版本，字體圖片等都會相應縮小，沒有滾動條
當pc站加了viewport時，在電腦上依然能看到一個完整清晰的網站，但在手機上就會出現一個有滾動條的網站，字體圖片也都很清楚，通常狀況下是不要這樣作的
作移動站時必定要加上viewport，不然顯示會出現問題，由於手機默認是以那個980px的中間層做爲渲染基礎的