Develop Reference

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

Viewport meta for android default browser

I'm trying to display an image (320x480px) in a webpage on android.
I'm trying to configure the viewport meta cause I want the image displayed in full screen.
Actually I simply configured the viewport like that
<meta name="viewport" content="width=320px" />
and it's working perfectly, except with the android default browser. I tried Chrome, Opera and Firefox, and they all display the image correctly.
Regarding this post Full webpage and disabled zoom viewport meta tag for all mobile browsers I tried to configure it in this way without success :
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
or
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=320,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Do you have any idea on how to configure the viewport correctly ?
Thank You

<meta name="viewport" content="user-scalable=no, width=device-width">
user-scalable - controls wither the user can "pinch-to-zoom".
width - the width of the viewport.
All of the attributes require integer values, NOT floating point values.
In other words, 1 and not 1.0. Or you could use percentage.
There is no point in setting min and max scaling attributes to the same value.
Also, initial-scale is known to cause problems in iOS if set to 1.

I tried the below one. It works perfectly for me.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">

I like:
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<meta name="viewport" content="width=321; user-scalable=no;" />
Android only accepts viewport widths GREATER than 320, so setting it on 321 did the trick for me.

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 browser input scale issue

I'm developing a mobile web-application. And I faced with the problem: when I focus any input text field on the page, the page scales (zooms), and besides only in android browser. Setting user-scalable=no in meta tag has not solved the problem.
Any ideas?
Thanks
Here is my veiwport:
<meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />

Try this , it works fine for me in galaxy pop
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

In your java code try this,
webView.getSettings().setSupportZoom(true);
webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);
Try this and let me know what happen..