Question

我正试图在我生命中第一次使用媒体查询。我想要实现的是移动浏览器的在线表单（主要用于Android MDPI / HPDI和iPhone 3到4）。

我所做的是用320px宽度背景图像对320px屏幕进行媒体查询，这样：

@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宽度的设备会缩放480px背景，因为它对于屏幕来说太大了，这是无意义的！

更奇怪的是，如果尝试在480宽度设备上加载320px-CSS-block（上面的第一个），那么它工作正常！没有变焦！但显然，图像有点模糊。

这也发生在我的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>

编辑：

我刚刚意识到媒体查询没有任何问题可以处理。

问题基本上是：为什么在两个480px宽度的设备上，320px宽度的背景图像被视为全屏，而480px宽度的背景图像被缩放？这只是无意义的！

Answer 1

答案：

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

在本文http://developer.android.com/guide/webapps/targeting.html

中，一切都得到了很好的解释

Answer 2

您可以使用meta标签控制目标dpi。您应该尝试或使用不同的密度值：

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

CSS媒体查询与背景图像宽度

2 个答案: