Can't get desktop page to display reliably on mobile

Question

I'm working on a page here that I can't get to display sanely on a mobile phone. I'm reading it with a Samsung S7. The page looks like this on the desktop (without the width arrow and dimension):

and that's what I would like to see on the S7: a simple scaled down version of the original. The width is 1200px. I have the meta viewport tag below on the page:

<meta name="viewport"  content="width=1200, initial-scale=3">

Sometimes this viewport tag works, giving me exactly what I want. But if I load it again, the page may load offset to the left so that the menu is off screen. Or it will load magnified. After it loaded incorrectly once, I kept tapping and swiping and it suddenly snapped to the correct layout above.

I've experimented with the viewport tag. The initial-scale value doesn't seem to have an affect, I've tried 1 and 3 it's worked with both and failed with both. The width seems to have to be 1200 or it will fail everytime.

Can anyone suggest why this is behaving so erratically?

Thanks

Answer 1

a simple scaled down version of the original.

For that, you should not use

<meta name="viewport"  content="width=1200, initial-scale=3">

Use

<meta name="viewport"  content="width=device-width, initial-scale=1.0">

Because, if you set width=1200px, you may have to scroll it in mobile device.

But in width=device-width, it automatically fetch the available width of device and stretch accordingly.

You can read the official documentation here on MDN

There are some other attributes regarding to zooming.

They are minimum-scale , maximum-scale, user-scalable.

minimum-scale -> The minimum zoom level <int> value

maximum-scale -> The maximum zoom level <int> value

user-scalable -> Whether allow the user to zoom or not. yes or no