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
1 Answers
Answers 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
0 comments:
Post a Comment