I just noticed whilst tweaking the VH on one of my sections that the Desktop (designer) and Mobile (published) versions look a lot different.
What I believe is happening is that the Mobile breakpoint on Desktop doesn’t calculate the determined height of said mobile device (i.e iPhone 6 Plus) and rather it is a percentage of the Webflow designer’ device (iMac Screen).
Is this an intended feature (or more or less hard to develop) or has this been overlooked? What I am doing to avoid this bug in the meantime is publishing my website and looking at the live mobile version to then find out what it looks like and what needs changing (more or less height for the section).
A viewport represents the area in computer graphics that is currently being viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc.: the part of the document you’re viewing.
Documents, like this article, may be very long. Your viewport is everything that is currently visible; notably the “what is a viewport section”, and perhaps some of the navigation menu. The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. Content outside the viewport, such as the See Also section in this document, is likely to not be visible onscreen until scrolled into view.
On larger monitors where applications aren’t necessarily full screen, the viewport is the size of the browser window.
On most mobile devices and when the browser is in fullscreen mode, the viewport is the entire screen.
In fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as viewport or smaller, and the document is the website, which can be much taller or wider than the viewport.
To recap, the viewport is basically the part of the document that is currently visible.
--------------------------------END Snippet-----------------------------------
I understand how the viewport works, my findings were that the designers screen for the mobile breakpoint makes the element vastly different to the eventual outcome.
I understand it’s probably tough to develop a way of displaying the mobiles height visually on desktops designer.
Hi @Kalan - It is hard to know where a users range of understanding is, within forums, so at least the link might benefit others,
As to your observation, yes I have the same issue. Obviously we can deal with widths in the designer. For device heights, I actually run the designer side by side with another browser window, loading up the preview, using devtools in responsive mode. I then size my designer screen up from the bottom to approximate the height I set the device to in the other window. so I have less round trips to deal with. Till we get a simulated window like browser developer tools, not sure there is any other method.
