什麼是viewport
手機瀏覽器是把頁面放在乙個虛擬的「視窗」（viewport）中，通常這個虛擬的「視窗」（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的布局），使用者可以通過平移和縮放來看網頁的不同部分。移動版的 safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其他手機瀏覽器也基本支援。
移動viewport的特點
移動端和桌面端不一樣，它有2個視口(viewport)：可見視口(visual viewport)和 布局視口(layout viewport).
關於2者的區別，stack overflow有這樣的解釋：
想象下現在有一張不會改變尺寸和形狀的大的，你手裡拿著乙個中空的框子(想象下砸空你手機的螢幕)，透過它你可以看到這張，並且這個框框的周圍是用不透明的材料做成的，你只能通過中間的洞去看這張。你可以移動這個框子，靠近自己的眼睛的話可以看到更多的區域，也可以使它遠離自己的眼睛，從而只看到這張的一部分小區域。那張不可改變形狀和尺寸的=布局視口(layout viewport)
你手中的中空的框子=可見視口(visual viewport)
也就是說我們在移動端用手指來縮放螢幕，其實改變的是可見視口(visual viewport)的尺寸，而布局視口(layout viewport)總是保持不變。
viewport設定
主要引數有下面幾個：
maximum-scale：使用者可以縮放的最大值
minimum-scale：使用者可以縮放的最小值
initial-scale：viewport的預設縮放大小
width：固定viewport的寬度
height：固定viewport的高度
user-scalable：是否允許使用者縮放
前三個引數都是縮放相關的，它們的值是viewport的縮放大小，他們僅僅改變縮放大小，並不是改變viewport的實際大小。比如要讓網頁載入時候顯示兩倍大小就可以加上這個
之後就是width和height，修改這倆東西就和我們在pc上訪問網頁時候用滑鼠拖動瀏覽器來改變大小一樣。或者說是瀏覽器（頁面區域）在螢幕上的預設大小。可以是具體的數值，也可以用「device-width」和「device-height」把它設定成瀏覽器螢幕的大小。比如要把頁面寬度固定到瀏覽器的螢幕上，防止出現橫向滾動條就可以使用
最後乙個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣
設定了這個屬性以後兩個手指在螢幕上把它摸到高潮它也不會縮放。上面這些屬性只要設定就可以讓網頁在mobile裝置下好好顯示，我一般會禁止橫向滾動條和使用者縮放，就像下面這樣
最後乙個是指定是否允許使用者自己縮放，也就是使用者通過兩個手指觸屏來縮放的方式。預設都是允許的值為1，如果要禁止可以把它的值設定為0。就像下面這樣
只要把他們用逗號隔開就可以了，不過有些瀏覽器不支援width和height設定固定數值（我這充話費送的破手機的預設瀏覽器就不支援）所以最好別用那個。移動端的優化
width device width initial scale 1.0 maximum scale 1.0 user scalable 0 name viewport yes name 第二個meta標籤是iphone裝置中的safari私有meta標籤，它表示 允許全屏模式瀏覽 black na...
移動端 移動端頁面適配方案
這是mdn上的解釋 這個單位代表根元素的 font size 大小 例如 元素的font size 當用在根元素的font size上面時 它代表了它的初始值 也就是說，rem單位取值的大小和根元素html的font size取值直接相關。它跟html元素之間得關係為 html的fontsize值 ...
pc端適配移動端
1.允許網頁寬度自動調整在網頁 的頭部，加入一行viewport元標籤所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬...