I have a requirement for my website to load entirely zoomed out on all devices, so I’ve added
<meta name="viewport" content="width=1600"/> to the head of my project in an attempt to solve this. The problem is that I’m still seeing what looks like roughly 150-200px of overflow on an iPhone 6 in portrait mode (375px width). iPhone 6 landscape and iPad all work great…
The strange part is that this fits perfectly if I set the viewport width to 1400, so why does 1600+ make a difference? Surely it should just show the content at the width that I specify. Also, you’d think that if one of 1400 and 1600 were to overflow, it would be the lower width that would have the issue
I thought this was perhaps due to the elements, but I set-up a new page which only had a body element and it was still overflowing by roughly the same amount.
Here’s an image of how the page loads:
Here’s how it looks if I set the viewport width to 1400 rather than 1600.
Thank you to anybody who can help me here