ViewPort is not Working on Android

Question

I'm testing html file on android tabs and phones. Viewport for different resolutions I used meta ViewPort:

 <meta name="viewport" content = "width=device-width , target-densityDpi=device-dpi , user-scalable = no , initial-scale=.51,maximum-scale=0.51,minimum-scale=0.51"/> 

but its not working means not scaling my BG image.

I tried it with it also:

<meta name="viewport" content = "width=device-width;target-densityDpi=device-dpi ; user-scalable = no ;initial-scale=.51;maximum-scale=0.51;minimum-scale=0.51"/>

the only difference is ';' but on it logcat shows Viewport ignored

I don't understand why this happening

This is my 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;
background-repeat: no-repeat;

}
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;

}

HTML:

With these settings i see follwing situation on my tab 2 7:

after adding no-repeat scrolls are already there.

Answer 1

First, comma is the correct delimiter in the content attribute, like so:

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, user-scalable=no, initial-scale=.51, maximum-scale=0.51, minimum-scale=0.51"/>

You also had some extra spaces in there. I would hope the WebKit implementation on Android would tolerate that, but be careful anyway. :)

By default, a Worklight-generated Android environment only has normalScreens enabled. I suspect, by the width/height numbers you show and that it is a tablet, that you have a "large screen", in Android-speak. Please check the AndroidManifest.xml for the following section:

<supports-screens
    android:smallScreens="false"
    android:normalScreens="true"
    android:largeScreens="false"
    android:resizeable="false"
    android:anyDensity="false"
    />

Adjust as necessary according to Android documentation .

You can also set android:scrollbars="none" in the WebView XML element in AndroidManifest.xml . See second answer to this question .

Answer 2

In order to use viewport in webView you need to enable setUseWideViewport and setLoadWithOverviewMode or else WebView is neglect the meta viewport tag.

mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setLoadWithOverviewMode(true);

Refer: Pixel perfect UI in the WebView