How do I support more mobile viewport widths on CSS3-enabled website and force mobile browser to use the proper width?

Question

I have website with fixed width of 1000px. I want to support 2 smaller widths of this page. I have succesfully done this through CSS media-queries like this:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

Now when I test my webpage on Android browser (2.3.3), it uses viewport width of 1000px so it displays website in full width. But it would be much better, if it would chosen viewport width of 800px, because webpage would display more optimized for device with smaller displays.

I know I can set viewport width using e.g.: <meta name="viewport" content="width=800px" /> or to set width coresponding to device physical width using: <meta name="viewport" content="width=device-width" />, but none of these would work. Because either it would force all mobile devices to always use 800px viewport in first case, or it would use physical width of pixels on device in second case, but that wouldn't work out too, because in portrait mode (how most people surf mobile web and use phone) that would be 300px or at most 400px, which is too small and user would have to scroll horizontally a lot.

So actually my question is this - can I support and possibly force mobile browsers to use different viewport widths depending on their actual screen size ? I don't know if I explained it properly enough, so I will get example what I want to achieve:

For mobile devices with physical width of 400px (modern devices with bigger displays) I would like to force viewport of 800px width and possibly with scale 0.5 so on first page visit would be displayed full without need of horizontal scrolling and with user option to zoom in to parts of the page.

For mobile devices with physical width of 300px ( some middle-class and low-end devices ) or smaller - I would like to force viewport of 600px width and possibly with scale 0.5 so on first visit would be displayed full or at least most of it on screen with little horizontal scrolling needed. And of course, user could zoom in to parts of the page.

Is this possible set up using just CSS or CSS3 ? I can imagine JS solution, but I would like to implement this just using CSS.

Thank you for any help in advance.

Answer 1

I do understand some part of your question...I have mainly worked on iPhone / iPad devices and less on Android ones...

I would recommend using

<meta name="viewport" content="width=device-width" />

to set the viewport based on devoce width..

Now even though you say, it would not work on orientation change, on the iPhone/iPad, the device width is always 768px whatever be the orientation.

So atleast on those devices, setting to device width would be fine..

For the Android devices, i am not really sure if the device width is returned different in each orientations.. My guess is it should be the same.

Could you please try setting the meta tag as above and see if it works fine. if no, i would be able to suggest some other way..

Thank you.