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!

Answers


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.


Need Your Help

How to reset SqLite database in Android?

android sqlite android-sqlite

I want my users to be able to reset the application, then I need to reset the SQLite database that I have created.