標籤：web適配 適配
本文完全是翻譯與總結Google官方的教程，已確保文檔的正確性。
免得大家被五花八門的其他的資料弄混了，也沒有系統行的學習。
一、設定視窗尺寸和適配螢幕解析度
Google官方文檔提到兩個大的方面。
1.Viewport視圖視窗
這個是html中設定的。主要是設定高度和寬度，還有初始的比列。這個寬度與高度將絕對html裡面CSS中有多少個像素可用。
Viewport的寬度與螢幕的寬度沒有決定性的關係。比如你的手機寬度是480PX但是你可以設定Viewport的寬度為960PX，這樣一張800PX的圖片就能一次性顯示完整，因為很多瀏覽器比如chrome，會儘可能的縮小到能一螢幕能展現整個網頁，也就是960PX的寬度。
注意:使用webView時並不會預設使用 全域概要模式。也就是自動縮小，用這個方法設定一下就行setUseWideViewPort().
<head> <title>Example</title> <meta name="viewport" content="width=device-width, user-scalable=no" /></head>
<meta name="viewport" content=" height = [pixel_value | "device-height"] , width = [pixel_value | "device-width"] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = ["yes" | "no"] " />注意：除非你確定你的程式自動適配的很好，而且在最小尺寸下也能使用，否則不要關閉user-scalable。
2.螢幕解析度
html在CSS中寫的像素單位，在Android中等同於160DPI的手機。如果是320DPI的手機，就會對這個單位進行放大。比如如果一張300像素寬的圖片，在160PI中能正常的顯示，但是到了320DPI中的手機就會放大兩倍，這個時候圖片就會失真，模糊，有紋理。
二、通過CSS來適配
1.不同解析度使用不同的CSS
通過設定-webkit-device-pixel-ratio 這個屬性0.75,1,,1.5來對應低分率，中解析度，高解析度。其實就是下面的寫法
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /><link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />2.或者通過不同的style和樣式表，寫法如下
#header { background:url(medium-density-image.png);}@media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ #header { background:url(high-density-image.png); }}@media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ #header { background:url(low-density-image.png); }}更多關於如何適配解析度尤其是圖片的適配可以參見 High DPI Images for Variable Pixel Densities.。
稍後如果有時間會把這個連結裡面的內容也總結一下。
三、通過javascript來適配
寫法如下：
Android瀏覽器或者WebView會通過 window.devicePixelRatio這個DOM文檔定義的屬性來指定當前的縮放比例。
預設的縮放比例是1.0.可以通過如下代碼來擷取比例，並作出對應的處理。
if (window.devicePixelRatio == 1.5) { alert("This is a high-density screen");} else if (window.devicePixelRatio == 0.75) { alert("This is a low-density screen");}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
