CSS媒體查詢與背景圖像寬度

我試圖在我的生活中第一次使用媒體查詢。我想要實現的是移動瀏覽器的在線表單（主要針對Android MDPI/HPDI和iPhone 3至4）。CSS媒體查詢與背景圖像寬度

我所做的就是做320米像素的屏幕媒體查詢與320像素寬度的背景圖像，這種方式：

@media only screen 
and (min-device-width : 120px) 
and (max-device-width : 320px) 
{ 

body { 
    background-image:url('../img/bg-320.jpg'); 
    background-repeat: no-repeat; 
    width: 320px; 
    height: 436px; 
    margin:0; padding:0; border:0; 
}

而且，在相同的CSS，另一個媒體查詢爲小屏幕（小於480像素寬）用480像素寬度的背景圖像，這種方式：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
{ 


body { 
    background-image:url('bg-480.jpg'); 
    background-repeat: no-repeat; 
    width: 480px; 
    height: 800px; 
    margin:0; padding:0; border:0; 
}

檢測工作正常，但問題是，480寬度的設備，他們放大了480像素的背景，因爲它是太大了他們的屏幕，這是一種無意義！

更奇怪的是，如果嘗試在480寬度的設備上加載320px-CSS塊（上面的第一個），那麼它工作正常！沒有縮放！但顯然，圖像有點模糊。

這發生在我的iPod Touch和我的HTC Desire上。

任何人都可以幫助我嗎？

順便說一句，我的頭看起來像：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
     "http://www.w3.org/TR/html4/frameset.dtd"> 
<html> 

<head> 

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 

    <link type="text/css" href="css/styles.css" rel="stylesheet" /> 

</head>

編輯：

我剛剛意識到媒體查詢沒有什麼做我的問題。

問題基本上是：爲什麼在兩臺480像素寬的設備上，320像素寬的背景圖像被視爲全屏幕，而480像素寬的背景圖像被放大？這只是一種無意義！

來源

2012-05-24 thomaus

答：

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no" />

一切都非常好，這篇文章解釋http://developer.android.com/guide/webapps/targeting.html

來源

2012-05-25 11:18:35 thomaus

您可以使用元標籤控制目標dpi。你應該給它一個嘗試或具有不同密度值：

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">

來源

2012-05-24 11:49:29 RynoRn

CSS媒體查詢與背景圖像寬度

回答

相關問題