CSS inconsistent on specific devices?

Question

I normally Google as much as possible, but I wasn't even sure how to go about researching this issue.

I have been going through The Odin Project to improve my front-end dev skills, so I created the calculator project. My calculator uses a CSS grid to layout the buttons and display box, so in my script, I accounted for the breakpoints where the calculator would start to overflow the screen:

.calculator {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 120px repeat(5, 100px);
justify-content: center;
align-content: center;
}

@media (max-width: 400px), (max-height: 620px) {
.calculator {
    grid-template-columns: repeat(4, 80px);
    grid-template-rows: 100px repeat(5, 80px);
}

button {
    font-size: 1.8em;
}
}

@media (max-width: 320px), (max-height: 500px) {
.calculator {
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: 80px repeat(5, 60px);
}

button {
    font-size: 1.6em;
}
}

I tested the breakpoints using responsive design mode on my browser; everything worked. I then checked on my phone, and it didn't work. It was significantly smaller than it is supposed to be.

So I decided to click the iPhone button in responsive design mode, and sure enough it was small. But as soon as I resized the window manually, it would work as intended in the CSS above.

You can test it for yourself at https://cstobler.github.io/calculator/

Full code is on my github at https://github.com/cstobler/calculator

One other thing, you might notice that the body has a --vh style property. That is set using this JS:

const setVH = () => document.body.style.setProperty("--vh", `${window.innerHeight * 0.01}px`);

setVH();

window.addEventListener("resize", setVH());

and can be found in the CSS above used for the height calculation. It was having the issue before I added that code, but I read on CSS Tricks that that solution could be used to fix viewport issues related to iOS address bar.

After testing quite a bit, I have no idea why this is happening, or how to fix it. Can anyone point me in the right direction?

Thanks in advance,

Charlie Tobler

Answer 1

I think this is happening because of display scaling that occurs on devices that use "retina" displays.

Without explicitly informing the browser to take the higher density display into account it'll treat 1px as 1px, making your interface half size (because iphone displays fit twice as many pixels into the same space).

Placing this meta element within the head of your page telling the browser the appropriate scale seems to do the trick.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

You can read more about it at MDN: Using the viewport meta tag to control layout on mobile browsers

Also, if anyone has a better explanation/technical details of why this is happening feel free to edit my post.