html适配Anroid手机
本文全然是翻譯與總結谷歌官方的教程，已確保文檔的正確性。
免得大家被五花八門的其它的資料弄混了，也沒有系統行的學習。
一、設置窗體尺寸和適配屏幕分辨率
谷歌官方文檔提到兩個大的方面。
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中能正常的顯示?？墒堑搅?20DPI中的手機就會放大兩倍。這個時候圖片就會失真，模糊。有紋理。
二、通過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"); }轉載于:https://www.cnblogs.com/zfyouxi/p/5137673.html
總結
以上是生活随笔為你收集整理的html适配Anroid手机的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一侧输卵管不通如何治疗
- 下一篇： jquery的动画学习--jquery权