1

私は生まれて初めてメディアクエリを使おうとしています。私が達成したいのは、モバイルブラウザ用のオンラインフォームです（基本的にはAndroid MDPI /HPDIおよびiPhone3〜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ピクセルの背景をズームすることです。これは意味がありません。

さらに奇妙なことに、320px-CSSブロック（上の最初のブロック）を480幅のデバイスにロードしようとすると、正常に機能します。ズームなし！しかし、明らかに、画像は少しぼやけています。

これは、iPodTouchとHTCDesireでも発生します。

誰か助けてくれませんか？

ちなみに、私のヘッダーは次のようになります：

<!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>

編集：

メディアクエリには問題を解決するものが何もないことに気づきました。

問題は基本的に：2つの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 に答える