9 devices · Smartphones
Huawei devices: CSS viewport, density, and screen resolution
Display characteristics of 9 referenced Huawei devices, each with the width your media queries respond to, its pixel density, and panel resolution. 1 of these devices can be tested directly in your browser.
Huawei Smartphones
2 distinct CSS widths cover the entire range: 360 and 392 px. Several models share the same: validating one of them is enough to validate the others.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| Huawei Nova 7i | 360 × 770 | 3x | 1080 × 2310 | 6.4" | 2020 |
| Huawei Mate 30 | 360 × 780 | 3x | 1080 × 2340 | 6.6" | 2019 |
| Huawei Mate 30 Pro | 392 × 800 | 3x | 1176 × 2400 | 6.5" | 2019 |
| Huawei P30 PRO | 360 × 780 | 3x | 1080 × 2340 | 6.5" | 2019 |
| Huawei Y9 Prime | 360 × 780 | 3x | 1080 × 2340 | 6.6" | 2019 |
| Huawei Y9s | 360 × 780 | 3x | 1080 × 2340 | 6.6" | 2019 |
| Huawei Mate 20 Lite | 360 × 780 | 3x | 1080 × 2340 | 6.3" | 2018 |
| Huawei Mate 20 Pro | 360 × 780 | 4x | 1440 × 3120 | 6.4" | 2018 |
| Huawei Mate 10 Lite | 360 × 720 | 3x | 1080 × 2160 | 5.9" | 2017 |
Which widths to test first
The most represented widths in the range are 360 and 392 px. Checking them first covers 9 of the 9 referenced Huawei models, and these should be your first breakpoints.
Go down to 360 px to cover the entire range, including Huawei Nova 7i: a layout that fits this width fits everywhere, including the oldest models still in circulation.
Watch out for height: mobile browsers reduce the visible area with their interface bars, and these retract when scrolling. A height of 100vh therefore overflows the first screen; svh and dvh units are preferable.
Test your site on 1 Huawei devices, without buying a single one
The tables provide measurements. The extension displays your site at the model's exact viewport, with its density, User-Agent, and portrait or landscape switching.
- 1 Huawei devices ready to use, from older models to this year's releases
- Screenshots and videos exported in the device's format
- Works on your local environments and pre-productions
Free · 4.9/5 on 5,100 reviews
1,500,000+ users
Other brands
Frequently asked questions
What is the most common CSS viewport for Huawei?
360 x 770 px, shared by 8 of the 9 referenced models, including Huawei Nova 7i and Huawei Mate 30. This is the width to check first in this range.
What minimum width to test to cover Huawei devices?
360 px, the width of the narrowest model in the list, Huawei Nova 7i. If your layout fits at 360 px, it fits on the 9 Huawei devices listed, up to the widest which reaches 392 px.
Why does the resolution announced by Huawei not match the CSS viewport?
Because these screens display multiple physical pixels per CSS pixel. Huawei Nova 7i has a panel of 1080 x 2310 pixels and a CSS viewport of 360 x 770 px, with a density of 3. It's the second value that should be written in a media query.
How to test your site on a Huawei device without having one?
With the Mobile FIRST extension: it replicates the viewport, pixel density, User-Agent, and touch events of 1 of these models, directly in your browser, including on a localhost address.
The mentioned brands and models belong to their respective owners.