Fit fixed width into mobile device viewport

Question

was reading about this everywhere, but can't find a cross-device, cross-browser solution.

We've got a page that has fixed width = 600px, and we would like it to always fit device width. For example, on a 480px resolution it would be scaled 0.8, on 320px it would be scaled 0.533.

I've tried with viewport and setting initial-scale via javascript (get screen width, calculate ratio, set viewport content to "width=device-width, initial-scale=calculated-ratio"), but it mostly doesn't work as expected.

Does anyone has a real-life solution for this?

Solution 1

OK, we've figured it out. It appears, that when you set initial-scale in the viewport meta tag, then you're unable to change it via JS. So the solution is to place a viewport only with width:

<meta name="viewport" content="width=600">

and then, directly under this line place a script to update viewport with the proper scale ratio:

viewportElement.setAttribute( 'content', 'initial-scale=' + ratio );

So that's how you fit a fixed width page into the mobile viewport :)

Solution 2

Try in head:

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

To ensure that user can't zoom use

Comments

[Pawel.W]

hey cJ_, thanks, but it's not about media-queries and 100% width. The page itself is fixed width, has all it's elements positioned absolutely, so 100% is not the way to go here.

[stiv]

ratio is not defined, viewportElement is not defined. How fix it?