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.

Website not scaling correctly in Android web browser

I'm developing a mobile website. It's working fine on iPhone in Safari using the following meta tag:
<meta name="viewport" content="width=device-width; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
In Android, the website is scaling to about 480 pixels in width and only taking up about half of the web browser, meaning the left side has the website at approximately 480 pixels in width and the right side is blank.
If I change the meta tag to this, it works fine:
<meta name="viewport" content="width=680; initial-scale=0.5; maximum-scale=1.0; user-scalable=1;" />
So "hard coding" the width at 680 pixels works, however I don't want to do this as this website is designed to accommodate multiple sizes. I tried adding target-densitydpi=device-dpi to the meta tag with no luck. What else can I do to have my website scale to the device's width on Android?

I 'solved' it by using $('body').css({ width: $(document).width() }) in jQuery, since the site already relies on JavaScript. I realize this is not a clean solution, but it works and I'm tired, so for now it'll have to do. If anybody has a better solution I'd love to hear it.

Phonegap Android pixel-ratio issue - Images, Page width not reliable

When I created a PhoneGap application previously, the images rendering on the pages are not correctly displayed on high DPI devices. So I made the web page with fixed pixel ratio: 1 for all devices without considering device DPI. But this will reduce the clarity of images.
I planned to use fluidic styles for my new app and not use specific width and height in HTML. But when I specified height in px for a div (in CSS), the height renders differently in different devices.
Is there any way to make the ratio of HTML as well as CSS width and height same?
Is there any unknown property to tell HTML to behave in different Pixel ratio.
I am using the HTML tag:
<meta name="viewport" id="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
I would like to render the page in device-dpi to avoid reduction in clarity. Kindly provide your ideas.

You should ideally avoid using pixels and use em's. For ex: Instead of 16px, use 1.1em or whatever is the equivalent for your situation. This worked for my phonegap jquerymobile applications

Treat Android 480w like a Zoomed 320/640w Mobile Web Design

My designer handed me a 640w design to work with on an iPhone and Android mobile website.
I got everything setup using the 320w measurements and replacing graphics with media queries based on pixel ratios. This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
The problem I'm running into is that the 480px wide Android test device looks too zoomed out, I tried to use different variations of the meta viewport tag to handle this. Each of the following was tried, independently, without yielding the desired effect.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, target-densitydpi=device-dpi" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=320" />
This is mostly a problem with images in the design being used as a background image to an element and other elements defined in PX dimensions. We've sized all of our typography as EM's so one simple media query could adjust all of the typography but the icons and layout graphics would still not be correct.
Mobile web is a bit uncharted for me and I'd like to find a way to handle this with the viewport setting rather than defining additional media queries. My understanding is that the viewport meta exists to help handle this type of problem across multiple viewport sizes without having to define new media queries every time a slightly different viewport comes to market.
If my approach is off please do share a reference to a better approach. We have a mix of elements that need to be fluid and fairly fixed, which makes this a challenge but I'm open to suggestions!

Replace your meta tags with these and see if it helps:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If those don't help then it would help to see your code to get an idea of how your CSS and HTML are laid out.

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.