1

我有生以来第一次尝试使用媒体查询。我想要实现的是移动浏览器的在线表格（基本上适用于 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 宽的设备会缩放 480 像素的背景，因为它对他们的屏幕来说太大了，这是胡说八道！

更奇怪的是，如果尝试在 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-width-background-image 被视为全屏，而一个 480px-width-background-image 被缩放？这简直是​​胡说八道！

4

2 回答 2

2

回答：

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

在这篇文章http://developer.android.com/guide/webapps/targeting.html上，一切都得到了很好的解释

于 2012-05-25T11:18:35.113 回答
0

您还可以使用元标记控制目标 dpi。您应该尝试一下或使用不同的密度值：

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

于 2012-05-24T11:49:29.707 回答