Menu
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; }
background-image: url('../images/abc_title.png');
width: 1280px;
height: 670px;
}
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;
}
Is its because of droidgap or cordove view
945
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">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
