Streaming live at 10am (PST)

Changing Meta Viewport Width Causes Overflowing on Mobile


#1

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

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


#2

Dave @ Webflow - You mentioned that the overflow could be caused by extra whitespace, but this wouldn’t make sense as to why 1400 fits fine but 1600 doesn’t. My understanding of viewport was that it should replicate that width as it would on desktop. Since my inner element is set to 100% width (with a max of 1600), it shouldn’t really overflow anyway right? Thanks :slight_smile:

Edit: Just to let you know, I’m working with 1760 now as my inner element is 1600px max and I have 160px of padding on the body, so this is the exact size I need the viewport at. Same issue though unfortunately.