Viewport argument value "device-width;" for key "width" not recognized. Content ignored
html, ibm-mobilefirst, javascript
Solution
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:
<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>
Problem
I am trying to set different Viewports for different android devices. for this i use this piece of code. ``` <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 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. 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. 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. 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: Here is css file: ``` body { background-repeat: no-repeat; margin: 0; ``` } div { width: 1280px; height: 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; ``` } Is its because of droidgap or cordove view