【问题标题】：Viewport argument value "device-width;" for key "width" not recognized. Content ignored视口参数值“设备宽度；”对于无法识别的键“宽度”。内容被忽略
【发布时间】：2013-03-12 03:27:01
【问题描述】：

我正在尝试为不同的安卓设备设置不同的视口。为此，我使用了这段代码。

<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”无法识别和忽略。

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

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

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

编辑：

我的 Viewport 仍然无法在 android 设备上运行。我希望我应该只使用一个 css，并且 css 应该根据设备缩放图像。

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

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

这是css文件：

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

}

div { 宽度：1280 像素；高度：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;

}

歌曲幻灯片{

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

}

是因为droidgap还是cordove view

【问题讨论】：

相关：stackoverflow.com/questions/3588628
是的，我使用相同的方法，但它有错误。
您看到投票最多的答案中的 cmets 了吗？
是的，我用了这两种方法，但没有效果
小问题。如果你不使用元标记，为什么要给它一个 ID？

标签： javascript html ibm-mobilefirst

【解决方案1】：

我已经通过删除逗号后的空格来解决它

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我不确定您在一般情况下和在 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>

【讨论】：

感谢您的帮助。但当时 Viewport 无法在我的 Android 设备上运行