Web view and mobile look different

Question

for developing, I'm using the chrome engine. On the web version everything is fine, but on a real device with chrome is it different. It happens with other browsers like Firefox too.

Here is a picture about the behavior: https://gyazo.com/1d0cab6f0467c72e3cd4d64dceccf3a2

The left side is the view from my desktop and the right side from my device.

body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

main {
  overflow: auto;
  height: calc(100% - 112px);
  background: red;
}

.navigation {
  height: 56px;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 6;
}

Does someone know why this happens?

Thanks in advance!

Can you show your HTML structure and how is the img styled, or is it a background image? — A Haworth, Jun 17 '21 at 02:04

score 0 · Answer 1 · answered Jun 16 '21 at 20:07

0

This could be because of the px values. Instead try using % or rem.

answered Jun 16 '21 at 20:07

Suraj.Shau

1
5

Hello, thanks for your reply. I tried it right now out, but it's still the same. – Timo Falter Jun 16 '21 at 20:14

score 0 · Accepted Answer · answered Jun 21 '21 at 11:17

0

The problem come from the vh.
On the mobile version is the vh different. I fixed it with calculating the vh with JavaScript. Here are more information: CSS3 100vh not constant in mobile browser

answered Jun 21 '21 at 11:17

Timo Falter

57
6

Web view and mobile look different

2 Answers2