【轉】WEB APP 不同設備屏幕下圖片適應分辨率

　　約翰·格魯伯：我認為 MobileSafari 不會再逐點對應的渲染圖片，因為新舊 iPhone 之間的像素尺寸極為懸殊。

　　戴夫·海厄特：大多數設計師仍停留在傳統的思想：CSS 像素即屏幕像素。然而，當我們進入高 DPI 的世界，用戶界面可能被整體放大，一個 CSS 像素會占據多個屏幕像素。

　　IPHONE 3和 IPHONE 4是最典型的了，圖片或ICON，在IPHONE 3能清晰顯示的時候，IPHONE 4卻會變的很模糊，無奈，只能準備兩套圖了。好在CSS提供的Media屬性，能方便的讓我們識別出不同DPI的設備，并以此來應用不同的樣式。

　　首先，看看，常見的IPHONE 和 Android屏幕參數。

設備	分辨率	設備像素比率
Android LDPI	320×240	0.75
Iphone 3 & Android MDPI	320×480	1
Android HDPI	480×800	1.5
Iphone 4	960×640	2.0

　　由此可見，Iphone 4的一個 CSS 像素實際上表現為一塊 2×2 的像素。所以圖片像是被放大2倍一樣，模糊不清晰。

　　解決辦法：

　　1、頁面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<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: 2.0)" href="retina.css" />

　　2、CSS文件里

#header {
    background:url(mdpi/bg.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /*CSS for high-density screens*/
    #header {
        background:url(hdpi/bg.png);
    }
}

　　注：本文轉自http://bbs.blueidea.com/home.php?mod=space&uid=168495&do=blog&id=23366

posted @ 2012-10-26 11:46 artwl 閱讀(2841) 評論(0) 收藏舉報

刷新頁面返回頂部

個人簡介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"設計模式"
	],
	"hobby": [
		"閱讀", "旅游",
		"音樂", "電影"
	]
}

TOP

【轉】WEB APP 不同設備屏幕下圖片適應分辨率

公告

個人簡介