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