Responsive View physically device vs devtools (Chrome, Edge etc)

General
1

Hello everyone. We are suffering with some issues: We develop a view, check with developertools (Chrome, Edge) and it looks good. Once we deploy it and visit the page on a physical device, the view looks very different. The width doesnt fit, the height is different and there is a horizontal scrollbar on the mobile view which should not be there.

Does anyone has any hint whats going on? Its a mess and very frustrating - i dont know if its browser, layout or what ever problem

2

Hard to say without knowing more.

Did I understand correctly that you’ve used the browser’s devtools to emulate specific mobile devices, or corresponding viewport sizes, and it looks correct there, but not on actual devices with the same viewport sizes?

Height can be tricky (and not just in Vaadin apps) since mobile browsers these days have dynamic viewport heights that change as toolbars slide in and out as you scroll. There are some new css units intended to help with that, but they also don’t behave the same on iOS and Android browsers.

Width is more surprising, however. It would help to see a screenshot and have some idea of how the layout is constructed (e.g. are you using AppLayout as the root layout, how is the layout within that implemented, etc).

3

Maybe this helps? https://youtu.be/ru3U8MHbFFI

I had a smiliar use case, where the usage of svh helped.

Also check your viewport settings, maybe there is the issue.

for instance something like this to use the device widht and prevent users from zooming the page.

@Viewport("width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0")
4

Thanks, i have added this ViewPort Annotation and removed a padding in the navbar, now it look good i think. Need to check on different deviced.
But the most issue which drives me crazy is, that the chrome dev tools view shows that every thing is fine, but on a physical device it doesnt fit.

1 Like
5

If mobile devices are important, I’d urge to test with simulators/emulators that you run on your workstation. That is pretty handy (and you can e.g. hook an iphone simulator to a desktop Safari’s web inspector), but results are much closer to actual devices than with Chrome’s dev tools.

1 Like