在移動設(shè)備上進(jìn)行網(wǎng)頁的重構(gòu)或開發(fā)跟束，首先得搞明白的就是移動設(shè)備上的viewport了抬吟，只有明白了viewport的概念以及弄清楚了跟viewport有關(guān)的meta標(biāo)簽的使用萨咕，才能更好地讓我們的網(wǎng)頁適配或響應(yīng)各種不同分辨率的移動設(shè)備。
一火本、viewport的概念
通俗的講危队，移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點钙畔，就是瀏覽器上(也可能是一個app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域茫陆，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大擎析，也可能比瀏覽器的可視區(qū)域要小簿盅。在默認(rèn)情況下，一般來講揍魂，移動設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的桨醋，這是因為考慮到移動設(shè)備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計的網(wǎng)站现斋，移動設(shè)備上的瀏覽器都會把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值喜最，這個是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會出現(xiàn)橫向滾動條庄蹋，因為瀏覽器可視區(qū)域的寬度是比這個默認(rèn)的viewport的寬度要小的瞬内。下圖列出了一些設(shè)備上瀏覽器的默認(rèn)viewport的寬度。
二蔓肯、css中的1px并不等于設(shè)備的1px
??? 在css中我們一般使用px作為單位遂鹊，在桌面瀏覽器中css的1個像素往往都是對應(yīng)著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺蔗包，那就是css中的像素就是設(shè)備的物理像素秉扑。但實際情況卻并非如此，css中的像素只是一個抽象的單位调限，在不同的設(shè)備或不同的環(huán)境中舟陆，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計的網(wǎng)頁中耻矮，我們無需對這個津津計較秦躯，但在移動設(shè)備上，必須弄明白這點裆装。在早先的移動設(shè)備中踱承，屏幕像素密度都比較低倡缠，如iphone3，它的分辨率為320x480茎活，在iphone3上昙沦，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術(shù)的發(fā)展载荔，移動設(shè)備的屏幕像素密度越來越高盾饮，從iphone4開始，蘋果公司便推出了所謂的Retina屏懒熙，分辨率提高了一倍丘损，變成640x960，但屏幕尺寸卻沒變化工扎，這就意味著同樣大小的屏幕上徘钥，像素卻多了一倍，這時定庵，一個css像素是等于兩個物理像素的吏饿。其他品牌的移動設(shè)備也是這個道理踪危。例如安卓設(shè)備根據(jù)屏幕像素密度可分為ldpi蔬浙、mdpi、hdpi贞远、xhdpi等不同的等級畴博，分辨率也是五花八門，安卓設(shè)備上的一個css像素相當(dāng)于多少個屏幕物理像素蓝仲，也因設(shè)備的不同而不同俱病，沒有一個定論。
我遇到的情況是袱结，有個Android大屏上面的APP亮隙，添加了個鏈接到一個網(wǎng)頁，但是出現(xiàn)的顯示屏很大 但是分辨率比較小
導(dǎo)致頁面顯示非常大
通過設(shè)置頁面viewport垢夹，由于是iframe里面的溢吻，設(shè)置的是會失效。
所以想通過css3 scale可以實現(xiàn)頁面的縮放
transform:scale(2);
我使用了SASS 果元，便利出多個促王，方便配置
@for?$i?from?1?through?100?{
??.scale-#{$i}?{
????width:?100%?*?(10?/?$i); //根據(jù)scale的是設(shè)置寬度
????position:?absolute;
????transform-origin:?0?0?0; // 設(shè)置變化的中心點為左上角
????transform:?scale($i?/?10);
??}
}
