Topic
  • No replies
SystemAdmin
SystemAdmin
106 Posts

Pinned topic Fit View in WebView

‏2013-03-25T08:57:40Z |
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("metaname=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("metaname=viewport").setAttribute('content', 'width=device-width, initial-scale=0.51, maximum-scale=0.51, user-scalable=0');

} else if (window.devicePixelRatio == .78) {

document.querySelector("metaname=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("metaname=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.

I also tried with ',':

<meta name="viewport" content="width=device-width, initial-scale=0.91; maximum-scale=0.91, user-scalable=0,target-densityDpi=device-dpi" />
But not working..
At that my Viewport is not working on android devices.
I want that i should use only one css and that 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./css/style.css" />

<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>
</head>
<body>
<button id='abc_slide' style=" background: url('./images/start.png'); " onclick="window.location.href='index.html'" ></button>
<button id='song_slide' style=" background: url('./images/alphabets.png');" onclick="window.location.href='song.html'" ></button>
</body>
</html>
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? I don't know why image is display with horizontal and vertical bars. When i tried this :

this.appView.getIntiallScale();
it gives me 1.0; But i set o.51 scale so why it is showing me 1.0?