9 设备 · 智能手机

Huawei 设备:CSS 视口、密度和屏幕分辨率

列出的 Huawei 的 9 个设备的显示特性,每个设备都有其媒体查询的宽度、像素密度和面板分辨率。1 个设备可以直接在您的浏览器中测试。

智能手机 Huawei

9 个模型 · 2017 → 2020

2 个不同的 CSS 宽度覆盖整个系列:360 和 392 像素。多个型号共享相同的宽度:验证其中一个即可验证其他。

Huawei 设备的 CSS 视口、像素密度、分辨率和对角线
型号 CSS视口 密度 面板分辨率 对角线 年份
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

优先测试哪些宽度

该系列中最常见的宽度是 360 和 392 像素。首先检查它们可以覆盖列出的 Huawei 的 9 个型号中的 9,并且您的第一个断点应落在这些宽度上。

降至 360 px 以覆盖整个范围,包括 Huawei Nova 7i:在此宽度下的布局适用于所有地方,包括仍在使用的最旧型号。

注意高度:移动浏览器通过其界面栏减少可见区域,并在滚动时收缩。因此,100vh 的高度会超出第一个屏幕;建议使用 svh 和 dvh 单位。

在 1 个 Huawei 设备上测试您的网站,无需购买任何设备

表格提供测量值。扩展程序以模型的精确视口显示您的网站,包括其密度、User-Agent 和纵向或横向切换。

  • 1 个 Huawei 设备可供使用,从旧型号到当年发布的型号
  • 以设备格式导出的截图和视频
  • 在您的本地环境和预生产环境中工作

免费 · 4.9/5 基于5,100条评价
1,500,000+ 用户

常见问题

Huawei 最常见的 CSS 视口是什么?

360 x 770 像素,由列出的 9 个型号中的 8 个共享,包括 Huawei Nova 7i和Huawei Mate 30。这是该系列中首先要检查的宽度。

测试 Huawei 设备的最小宽度是多少?

360 px,列表中最窄型号的宽度,Huawei Nova 7i。如果您的布局适合 360 px,它适用于所列的 9 台 Huawei 设备,直到最宽的达到 392 px。

为什么 Huawei 宣布的分辨率与 CSS 视口不符?

因为这些屏幕每个 CSS 像素显示多个物理像素。Huawei Nova 7i 的面板有 1080 x 2310 像素,CSS 视口为 360 x 770 像素,密度为 3。在媒体查询中应写入第二个值。

如何在没有 Huawei 设备的情况下测试自己的网站?

使用Mobile FIRST扩展:它在您的浏览器中直接重现这些型号的1个设备的视口、像素密度、User-Agent和触摸事件,包括在localhost地址上。

提到的品牌和型号属于各自的所有者。