5

Android デバイスごとに異なるビューポートを設定しようとしています。このために、このコードを使用します。

<head>

<meta name="viewport" content="width=device-width; initial-scale=0.91; maximum-scale=0.91; user-scalable=0;target-densityDpi=device-dpi" />

<script>

if (window.devicePixelRatio == 1)
{
   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0,target-densityDpi=device-dpi');

} else if (window.devicePixelRatio == 2) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0');

} else if (window.devicePixelRatio == .78) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi');

} else if (window.devicePixelRatio == 1.5) {

   document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi');

}

</script>

</head>

問題は、適切なコンテンツ値を設定していないことです。そしてLogcatでこのエラーを出しています

ビューポート引数値「デバイス幅;」キー「幅」が認識されません。内容は無視。

ビューポート引数値「デバイス幅;」キー「幅」が認識されません。内容は無視。

ビューポート引数キー ";initial-scale" が認識されず、無視されました。

ビューポート引数値「いいえ;」キー "user-scalable" が認識されません。内容は無視。

ビューポート引数キー "device-dpi" が認識されず、無視されました。

助言がありますか。下手な編集で申し訳ありませんが、編集できません。

編集：

その時点で、私のビューポートはまだ Android デバイスで動作していません。css を 1 つだけ使用し、tat css はデバイスに応じて画像をスケーリングする必要があります。

このために、私はViewportをtarget-dpidensityで使用し、最初に動作していたときに初期スケールと最大スケールを与えましたが、Androidでこのアプローチを実行するとViewportを無視します。

実際の問題は、html のバックグラウンドで画像を設定し、Android デバイスでこのアプリを実行すると、画像がズームムードになることです。このために、スキンの html ファイルと app.java ファイルを変更し、ズーム ムードを無効にし、target-dpidensity も使用しましたが、すべてのメソッドが機能しません。html コードは次のとおりです。

html

css ファイルは次のとおりです。

body {
background-repeat: no-repeat;
margin: 0;

}

div { 幅: 1280px; 高さ: 670px; }

家 {

background-image: url('../images/abc_title.png');
width: 1280px;
height: 670px;

}

abc_slide {

position: relative; background : transparent;
width: 129px;
height: 76px;
background: transparent; width : 129px; height : 76px;
margin-top: 80px;
margin-left: 80px;
        border: thin;

}

song_slide {

position: relative;
background: transparent;
margin-top: 80px;
margin-left: 80px; width : 129px;
height: 76px;
width: 129px;
    border: thin;

}

ドロイドギャップまたはコードビューのせいですか

4

3 に答える 3

8

コンマの後のスペースを削除して解決しました

 <meta name="viewport" content="width=device-width, initial-scale=1 ">

 <meta name="viewport" content="width=device-width,initial-scale=1">
于 2016-10-17T09:24:15.150 に答える
7

一般的に何をしようとしているのか、特に if で何をしようとしているのかはわかりませんが、HTML からメタ タグを削除して、次のようなものを使用できます。

<script>
    var viewportContent = '';
    if (window.devicePixelRatio = 1) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    } else if (window.devicePixelRatio == 2) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0';
    } else if (window.devicePixelRatio == .78) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    } else if (window.devicePixelRatio == 1.5) {
        viewportContent = 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0, target-densityDpi=device-dpi';
    }
    $('head').append('<meta name="viewport" content="' + viewportContent + '">');
</script>
于 2013-03-23T21:06:38.273 に答える