我正在尝试为不同的 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-dpi”无法识别和忽略。
有什么建议么。抱歉编辑不佳,我无法编辑它。
编辑:
那时我的 Viewport 仍然无法在 android 设备上运行。我希望我应该只使用一个 css 并且 tat css 应该根据设备缩放图像。
为此,我将 Viewport 与 target-dpidensity 一起使用,并在它第一次工作时给出了初始和最大比例,但现在当我在 android 上运行这种方法时,它忽略了 Viewport。
实际上的问题是,当我在 html 的背景中设置图像并在任何 android 设备上运行此应用程序时,它会以缩放的心情提供图像。为此,我更改了我的皮肤 html 和 app.java 文件并禁用了缩放心情,还使用了 target-dpidensity 但所有方法都不起作用这是 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;
}
歌曲幻灯片{
position: relative;
background: transparent;
margin-top: 80px;
margin-left: 80px; width : 129px;
height: 76px;
width: 129px;
border: thin;
}
是因为droidgap还是cordove view