Why is the viewport tag on the Galaxy Nexus / Android 4 not working?

android resize viewport
evschlkn picture evschlkn · Feb 21, 2012 · Viewed 10.6k times · Source

I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this. My viewport tag looks like this: 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

No matter what I change about the tag, the space is always there and the content doesn't fit to screen. I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too! Do you have this problem too and is there a way to fix it?

Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6 Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..

Answer

Petr Urban picture Petr Urban · Mar 9, 2012

The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser

Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.

There are settings in the browser (settings->advanced) where you can change things:

  1. Default zoom - it makes difference, but it does not fix the issue
  2. Auto-fit pages - in my case makes no difference

Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.

UPDATE (solution):

Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).

Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(

Related questions

Android: How to Programmatically set the size of a Layout

As part of an Android App I am building a button set. The buttons are part of a nested set of LinearLayouts. Using weight I have the set resizing itself automatically based on the size of the containing parent LinearLayout. …

Read More
How to resize a custom view programmatically?

I am coding a custom view, extended from RelativeLayout, and I want to resize it programmatically, How can I do? the custom view Class is something like: public ActiveSlideView(Context context, AttributeSet attr){ super(context, attr); LayoutInflater inflater = (LayoutInflater)context.…

Read More
Resize a large bitmap file to scaled output file on Android

I have a large bitmap (say 3888x2592) in a file. Now, I want to resize that bitmap to 800x533 and save it to another file. I normally would scale the bitmap by calling Bitmap.createBitmap method but it needs a …

Read More