Html – Fit fixed width into mobile device viewport

csshtmlmobileresponsive-design

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?

Best Answer

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 :)

Related Topic