home {

Question

我正在尝试为不同的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中发出此错误

视口参数值“device-width;”关键字“宽度”无法识别。内容被忽略。

视口参数值“device-width;”关键字“宽度”无法识别。内容被忽略。

视口参数键“;初始比例”未被识别和忽略。

视口参数值“no;”用于关键的“用户可扩展”无法识别。内容被忽略。

无法识别并忽略视口参数键“device-dpi”。

任何建议。抱歉编辑不好我无法编辑。

编辑：

此时我的视频仍未在Android设备上运行。我想我应该只使用一个css和tat css应该根据设备缩放图像。

为此我使用了具有target-dpidensity的Viewport，并在第一次给出初始和最大比例时它正在工作但是现在当我在android上运行这种方法时它会忽略Viewport。

实际上问题是，当我在html的背景中设置图像并在任何Android设备上运行此应用程序时，它会以缩放的方式呈现图像。为此，我更改了我的皮肤html和app.java文件，并禁用了缩放情绪，也使用了target-dpidensity，但所有方法都不起作用这是html代码：

html

这是css文件：

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

}

div { 宽度：1280px; 身高：670px; }

home {

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;

}

是因为droidgap或cordove view

Answer 1

我不确定您一般会尝试做什么，特别是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>

Answer 2

请注意，您必须将视口内容的参数分隔为“，”（如上面的答案中所示）而不是“;” （这将被视为价值的一部分，可能会导致意外行为）

Answer 3

我通过删除逗号

之后的空格解决了这个问题

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

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

视口参数值“device-width;”关键字“宽度”无法识别。内容被忽略了

home {

abc_slide {

song_slide {

3 个答案: