CSS 媒体查询不反映设备屏幕大小

Question

I'm building a mobile web app and I created this media query to target phones with a lower screen height than the iPhone X+ (812px):

@media (max-height: 811px) {

}

It works perfectly on iOS devices but when I launch the app on a Huawei P30 pro, which clearly have a bigger screen than the iPhone, it enter in the above media query and the viewport height seems to be only 755px.

Why did the Huawei, with a bigger screen, have a smaller viewport height?

What can I do to target only phones that have a physically smaller screen than the iPhone X?

Answer 1

You could make this change in your index.html - This is the one I would say is likely to be the issue for you

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

---

Or you could try this change in your CSS

@media screen and (max-device-height: 811px) {

}