Develop Reference

Standard Viewport setting not working for Android/Chrome

My meta viewport is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
On an Android phone under Chrome my web page display is not scaled. It appears with tiny text, pics, etc. The same page is fine on my iPhone.
Does anyone have any ideas/suggestions?

Try this:
<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Check out the attributes for viewport https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes
user-scalable=1" - should also be 'yes' or 'no'

Viewport Android Fit to screen

I'm working on a website (it is not responsive) and I want to fit to screen when I access it from mobile.
On iPhone it is ok, it fits. But on android it has zoom to phone resolution or something.
This is my viewport:
<meta name="viewport" content="width=1100">
Not like this:

set width to device-width,So change
<meta name="viewport" content="width=1100">
to
<meta name='viewport' content='width=device-width, initial-scale=1.0 maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;' />

You need to adjust the scaling. Reference:
http://developer.android.com/guide/webapps/targeting.html
Also have a look at this:
WebView in Android 4.4 and initial-scale

Android not scaling viewport

This viewport is scaling down perfectly for iphones but it does nothing right but preventing the user to zoom on the site for android phones.
The site has 1080px width, how can I scale it down to 320px correctly?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />

i would say use css to over come this i had the same problem and i sorted it using css it does mean doing a bit more css coding but i think it would be your easier option in my work with IOS and android i find it easyer to worek with IOS as they not that far of desktop browser standards un like android

Try setting scalable to NO rather than 0;
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
this usually works for me.
Steve

PhoneGap ignores viewport tag with specific width set?

I have developed a webapp and successfully used the viewport element to fit the app for different devices. On iPhone for example i used this one:
<meta name="viewport" content="width=685,user-scalable=0" />
My webapp looks fine with this viewport on the iPhone Safari browser. Therefore i thought, it would be easy to wrap my webapp with the help of PhoneGap as an AppStore App. But so far i had no luck to do so. The viewport tag seems to be ignored completely.
So here is my question:
Does the viewport tag work at all with a specific width (like in the above example) on PhoneGap? Or do i have to rework everything to responsive web design?

I've been fighting with the same for a few hours.
With the last version of phonegap i managed like this :
In your main java, add the following lines BEFORE super.loadUrl(blablabla
super.init();
super.appView.getSettings().setUseWideViewPort(true);
super.appView.getSettings().setLoadWithOverviewMode(true);
This still will allow the user to "double tap" to zoom in/out. So modify your meta with this :
<meta name="viewport" content="width=685; target-density-dpi=device-dpi ; initial-scale=0.1; maximum-scale=0.1; user-scalable=no;" />
It worked for me with Phonegap 3.0, and Android >= 4

Use the meta tag like this to set the width automatically to device width:
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
Hope that helps.

Try adding this to the header of html
<META NAME="viewport" CONTENT="width=device-width, initial-scale=1, user-scalable=no"/>
and this to your config.xml:
<preference name="EnableViewportScale" value="true" />

Try this-
< meta name="viewport" content="width=device-width; user-scalable=yes; initial-scale=0.1; maximum-scale=5; minimum-scale=0.5" />

Android-- PhoneGap/WebView ignores viewport meta tags?

I have a webpage that I'm trying to display on my Android device (loaded from the assets directory of the project) using PhoneGap (which uses a normal WebView set as the "appview"), but the webview completely ignores the following:
<meta name = "viewport" content = "user-scalable=no,width=device-width" />
No matter what I set in this line (I've tried explicitly setting the zoom, setting the width/height in pixels, etc.), the device completely ignores it and renders the website very small and anchored to the upper left-hand corner of the screen. I can zoom in using the pinch gesture (even if I explicitly disable zoom in the html code above), but I want the page to be zoomed-in to properly fit the device on load.
Here's the interesting bit... If I put the exact same site on my web server and navigate to it using the default browser on my test device, the page loads properly (scaled to the right size for the device).
Please help.
Thanks.
EDIT1:
My current settings are:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
That too is completely ignored.
EDIT2:
Here's something interesting...
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" />
The above line scales the page to 2x in the emulator yet changes nothing on my device (Samsung Epic running 2.2.1). Still though, even at 2x, the page is not being scaled to the emulator's width... I'd have to set that to something like "initial-scale=2.5".

Try adding the following two lines in the onCreate() method of the Java class that extends DroidGap.
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
Let me know if your viewport tag now begins to work.

I've try
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
Zoom is not enabled.
With the following setting, zoom enabled
this.appView.getStrings().setSupportZoom(true);
But it's not controlled correctly by the viewport tag, all page are zoomable now even with minimum-scale=1 and maximum-scale=1 set in the viewport tag.
And the page navigation got error now, clicking the button on page and the android back button is not working correctly.

There are good answers here but the Cordova API seem to have changed a bit.
In the OnCreate method (after loadUrl or after you call init explicitly):
CordovaWebViewEngine engine = appView.getEngine();
SystemWebView webView = (SystemWebView)engine.getView();
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);

If you want android to scale your content to fixed width (1024 in example) use this:
<meta name="viewport" id="viewport" content="width=1024">
<script type="text/javascript">
var viewPortWidth = 1024;
function setViewport() {
if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) {
var wW0 = window.screen.width;
var scale = wW0/viewPortWidth;
var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes";
document.getElementById("viewport").setAttribute("content", vPort);
}
}
setViewport();
</script>
Also, you should add event listener for onorientationchange to call setViewport function.

I use this on iphone with phonegap
<meta name="description" content="trevorrudolph.com">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png">