How to set the initial-scale so that website renders nicely on the browsers of all devices

Question

I am having an extremely hard time figuring out how to set the initial scale such that a website looks nice across all the different browsers, operating systems and device. My site has a main.css file, then additional files like mobile.css and tablet.css gets included depending on what device you have.

I have a hash table of key value pairs where the key is the browser+OS+device and the value is the initial-scale value. My controller code will determine what browser+OS you are using before assigning the appropriate initial-scale to the view. This is not a good way of outputting initial scale.

I would like a solution that's any of the following:

• specify only one constant initial scale that, in combination with other constant attributes, will render the site nicely

• a simple equation to derive the appropriate initial scale based on other attributes of the browser, OS and device

• a way to render the site consistently across all browser, OS and devices WITHOUT the use of initial scale

Here are example problems I'm having: If I set the initial scale to 1, it renders nicely on Galaxy Note 1+Stock browser+Android4.0.4, but it is way too large on Galaxy Note 1+Chrome+Android 4.0.4. In other words, on the same phone and same OS but different browser, the scale is messed up! In fact, it also looks ugly on all iOS devices. It is excessively big On iphone4S with OS6, and just slightly too big on iPad 1 with OS 5.1.

There must be an easier way to control the scale of websites on mobile devices?

Answer 1

Try this:

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

<link rel="stylesheet" href="/Styles/tablet.css" media="screen and (max-width:800px)" />

<link rel="stylesheet" href="/Styles/mobile.css" media="screen and (max-width:480px)" />