Html 视口参数值“设备宽度；” 对于无法识别的键“宽度”。内容被忽略
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15567532/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Viewport argument value "device-width;" for key "width" not recognized. Content ignored
提问by User42590
I am trying to set different Viewports for different android devices. for this i use this piece of code.
我正在尝试为不同的 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>
Now problem is that it not setting the appropriate content values. and in Logcat giving this error
现在的问题是它没有设置适当的内容值。并在 Logcat 中给出此错误
Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument value "device-width;" for key "width" not recognized. Content ignored.
Viewport argument key ";initial-scale" not recognized and ignored.
Viewport argument value "no;" for key "user-scalable" not recognized. Content ignored.
Viewport argument key "device-dpi" not recognized and ignored.
视口参数值“设备宽度；” 对于无法识别的键“宽度”。内容被忽略。
视口参数值“设备宽度；” 对于无法识别的键“宽度”。内容被忽略。
视口参数键“;initial-scale”未被识别和忽略。
视口参数值“no;” 对于无法识别的关键“用户可扩展”。内容被忽略。
视口参数键“device-dpi”无法识别并被忽略。
Any Suggestions. Sorry for the poor editing i am unable to edit it.
有什么建议。抱歉编辑不好，我无法编辑它。
EDIT:
编辑：
At that my Viewport is still not working on android devices. I want that i should use only one css and tat css should scale images according to the device.
那时我的 Viewport 仍然无法在 android 设备上运行。我希望我应该只使用一个 css 并且 tat css 应该根据设备缩放图像。
For this i used Viewport with target-dpidensity and gave intial and maximum scale first time it was working but now when i run this approach on android it ignore Viewport.
为此，我将 Viewport 与 target-dpidensity 一起使用，并在第一次工作时给出了初始和最大比例，但是现在当我在 android 上运行这种方法时，它忽略了 Viewport。
Actually problem is that when ever i set image in background in html and run this app on any android device it gives image in zoom mood. For this i change my skin html and app.java file and disable zoom mood and also used target-dpidensity but all methods are not working Here is html code:
实际上的问题是，当我在 html 中在背景中设置图像并在任何 Android 设备上运行此应用程序时，它都会以缩放模式显示图像。为此，我更改了我的皮肤 html 和 app.java 文件并禁用缩放情绪，还使用了 target-dpidensity 但所有方法都不起作用这是 html 代码：
Here is css file:
这是css文件：
body {
background-repeat: no-repeat;
margin: 0;
}
}
div { width: 1280px; height: 670px; }
div { 宽度：1280 像素；高度：670px；}
home {
家 {
background-image: url('../images/abc_title.png');
width: 1280px;
height: 670px;
}
}
abc_slide {
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;
}
}
Is its because of droidgap or cordove view
是因为 droidgap 还是 cordove 视图
回答by Raanan Avidor
I am not sure what you are trying to do in general and in the if specificly, but you can remove the meta tag from your HTML and use something like:
我不确定您在一般情况下和 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>
回答by Peter T.
Be aware that you have to separate the arguments of the viewport-content by "," (as in the answer above) not by ";" (which will be regarded as part of the value and might cause unexpected behaviour)
请注意，您必须用“,”（如上面的答案）而不是“;”分隔视口内容的参数。（这将被视为价值的一部分，并可能导致意外行为）
回答by Adel
I have solved it by removing the spaces after the comma
我已经通过删除逗号后的空格来解决它
<meta name="viewport" content="width=device-width, initial-scale=1 ">
<meta name="viewport" content="width=device-width,initial-scale=1">
