Develop Reference

Viewport not sizing correctly on Android

I got a weird problem with the viewport. On iPhone & Android landscape it looks great, but in Android portrait mode it looks horrible.
Here is my meta tag:
<meta name="viewport"
content="user-scalable=no; width=device-width; target-densityDpi=device-dpi"/>
Images below:

Try using commas instead of semicolons as delimiters. Also, I wouldn't bother with target-densityDpi=device-dpi as it's only supported in older Android browser versions and does more harm than good.
So, that would give you:
<meta name="viewport" content="user-scalable=no, width=device-width "/>

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" />

How to scale a website for mobile devices?

I've a very simple static web page (only css and links, no scripts).
It looks good on android and iphone, but too small. I'm guessing they put it smaller since it work for most of the sites.
How can I override this and make him look the size I want it to be?

Android automatically adjusts to the size of your site, try to use width:100% or smaller than around 310 pixels (scrollbar takes space) for normal viewmode.
For IPhone try using this code to force the correct size
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Also to force font-size try to use this code in your css:
-webkit-text-size-adjust: none;

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
The list should be comma-separated.