Develop Reference

Android width:100% fix (website takeover issue)

I'm making a website skin / takeover.
It looks good on all browsers except android, where the skin image css parameter (width: 100%) is seen as the screen width not as at least the website's width. So it doesn't wrap the website but stops at the device's screen width. Please see yourself, I cannot explain very good. What can I do?
The first image is the website loaded on galaxy S3 and the second image is the website a little scrolled to see the right side. Please edit my question if you have better words.
This is the temporary link until I will move it to the client: http://csengrosseto.digitalprimes.com

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
This is the version that also controls the zoom.

Android CSS layout will not use full screen width

I am developing a mobile website at the moment. You can see it here: http://m.mayojobs.ie. In a nutshell the website lists job adverts, a search menu, and a "load more jobs" button.
The layout looks nice in iPhone (Safari & Chrome), but for some reason in Android each job listing is only using about one third of the screen. It should not be doing this.
Also, the Google Advert at the bottom of the screen is supposed to be 300 x 250, but for some reason is tiny.
I have been trying to solve this for days but can't figure it out.
If any of you know why this is happening, I would greatly appreciate your help.
Thanks you.

Try to see in the browser settings the zoom probably is at 'far'.
You could try also with
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

Full webpage and disabled zoom viewport meta tag for all mobile browsers

I want my webpage to be full screen and disable zooming on all mobile devices.
With the meta tag:
<meta name="viewport" content="width=1165, user-scalable=no">
I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%.
If I use the tag
<meta name="viewport" content="width=max-device-width, user-scalable=no">
I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone.

Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers.
Android 2.2: viewport meta tag does not seem to be supported at all.
Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.
<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" />
Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.
iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using user-scalable=no.
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.
[EDIT]
Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:
<meta name="viewport" content="width=620, user-scalable=no" />
[EDIT 2]
iOS/Safari 7.1: Since v7.1, Apple have introduced a new flag for the viewport meta tag called minimal-ui. To assist with full screen apps, this hides the address bar and bottom toolbar for a full-screen experience (not quite Full Screen API but close and doesn't require user acceptance). It does comes with it's fair share of bugs as well and doesn't work in iPads.
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[EDIT 3]
iOS/Safari 8 Beta 4: The viewport meta tag minimal-ui mentioned in EDIT 2 has now been removed by Apple in this release. Source - WebKit Notes

HTML
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
jQuery
Option 1:
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
Option 2:
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
Option two being a bit more of a last resort if you're finding inconsistency.

Simply use:
<meta name="HandheldFriendly" content="True" />
Works well on my Samsung Note II and HTC Desire.

For Apple devices is easy:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
The first tag run the web app in full screen mode when you open it via a shortcut icon placed on the iPhone/iPod/iPad home screen.
The second tags works only in conjunction with the first one. Possible values are: default, black and black-translucent.
The third tag blocks the site width to its standard size (1.0) and does not allow zooming.
NOTE: as the "apple-mobile" meta tags are ignored on non-Apple devices and the 3rd tag is official in HTML5, you can use all of them together.
For Android you have not a global solution since not everybody uses the default android webbrowser. See Fullscreen Web App for Android
Here some other useful links:
Tips for iOS:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
All the official and unofficial known meta: https://gist.github.com/kevinSuttle/1997924

Android fixed it from version 4.4.2
<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" />

I have a Samsung Galaxy Note 4 and use chrome as my browser. I found it was ignoring the viewport meta tags, got it to work with HandheldFriendly. I ended up with a meta tag combo. Works for me on Android and iOS.
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">

I was having all kinds of problems with this and even started to build a browser detection system to deliver different viewport tags to different browsers. Then I decided to try simplifying what I was doing and everything worked. Set the viewport to the width you want your site to be and walk away everything is working now.
<meta name="viewport" content="width=1165 />

For what it's worth, here's what I used to get a 1024px width content page to go exactly full screen on my Nexus 7 (Android 4.2.2)/Chrome, landscape only without resorting to javascript*:
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
(I think the user-scalable=no actually negates the min- & max-scale though). I got the .94 value by trial and error, not by any sort of calculation invoking device pixel density or anything like that.
*i.e. to force content width to match window -- I did use js to conditionally write the viewport meta content.

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>

We used the following Javascript in the header to set the meta tags:
<script>
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site
} else {
document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need
}
</script>
You could add additional conditions and set them for your specific needs.

The below suggestion from Dan B has worked great for me, i have been having all sorts of issues trying to get my site to load right on android, and this has sorted it. For now anyways!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
Thanks!

I am using this code to prevent zoom in iPhone and problem was solved but another problem arises; when I click on input field whole window jumps up then sets its position to normal, when i pressed go button same behavior occurs and windows jumps. i need to get rid of jump so that only window resizes it to normal location.
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}

Android default browser not scrolling web page

I'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)
My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.
My dev build of the site is here: www.adamjdesigns.info/csu/engage
EDIT - Other code I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) {
$('html').css({'height':$(window).height(),'overflow':'auto'});
}
Any help is greatly appreciated!

Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.02" />

I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)
Thanks for your help, everyone!

FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:
<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>
This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.

What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.

Try this for your viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Android WebView seems to ignore "viewport" information on web pages

I have a website that is using the viewport META tag to tell mobile browsers how to display content ( ). Viewing the page in the Android browser looks correct (and iPhone, etc).
When I load the page into a WebView component in an android Application, the WebView ignores the "VIEWPORT" tag, and renders the page at "full" resolution, which is zoomed-in in this case.

After lot's of experimentation I've determined that the Android WebView won't obey the 'viewport' setting if the actual page forces a width wider than the viewport setting.
For example, I was setting a viewport of 500px, but had an element on my page that forced a 960px width. The viewport wasn't obeyed because the WebView refused to hide that extra content.
This seems obvious when I'm typing it, but I must have spent days working on the problem.

As the docs say in the link in the best answer, you can specify using a meta tag how the device should react to the size of your web app compared to the screen. The following tag made an Android phone respect the viewport size of my web app:
<meta name="viewport" content="target-densitydpi=high-dpi" />

Try using this method of WebSetting class
setUseWideViewPort (boolean use)
I use this to tell Android webview to consider my "viewport" tag

Link in the accepted answer and this will help to understand viewport on Android.
In my scenario, fixed width is used, the solution is:
settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)

Another fail in the implementation on some Android Phones ist the fact, that for example the HTC Desire HD will ignore the viewport TAG - user-scale=no completly.

Use this:
<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />
Now Android WebView and the Browser adheres to the viewport settings.
Phew, this took a lot of tweaking to get right. Jeez.

I can only confirm your issue. There is an open issue at the android issue tracker. Please give it a vote/star if you're affected by this.

The only thing that worked for me was
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />
but specifically adding maximum-scale=1.0, minimum-scale=1.0 to the already existing tag helped. For my specific case I didn't want to give the user the ability to zoom in/out so YMMV.