9 デバイス · スマートフォン

Huawei デバイス: CSS ビューポート、密度、画面解像度

Huawei デバイス 9 の表示特性が参照されており、それぞれのメディアクエリが反応する幅、ピクセル密度、パネル解像度が示されています。これらのデバイスのうち 1 はブラウザで直接テストできます。

スマートフォン Huawei

9 モデル · 2017 → 2020

2 の異なる CSS 幅が全範囲をカバーしています:360 と 392 px。複数のモデルが同じ幅を共有しているため、1つを検証するだけで他のものも検証できます。

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 px です。これらを最初に確認することで、参照されている Huawei モデル 9 のうち 9 をカバーし、最初のブレークポイントを設定する必要があります。

360 pxまで下げて、Huawei Nova 7iを含むすべての範囲をカバーします。この幅に収まるレイアウトはどこでも収まります。まだ流通している最も古いモデルも含まれます。

高さに注意してください。モバイルブラウザはインターフェースバーで表示領域を縮小し、スクロールするとこれらが縮小します。そのため、100vh の高さは最初の画面を超えます。svh と dvh の単位が推奨されます。

Huawei デバイス 1 でサイトをテスト、1つも購入せずに

表は測定値を示します。拡張機能は、モデルの正確なビューポートでサイトを表示し、その密度、User-Agent、および縦向きまたは横向きの切り替えを行います。

  • Huawei デバイス 1 がすぐに使用可能、古いモデルから今年の新作まで
  • デバイス形式でエクスポートされたキャプチャとビデオ
  • ローカル環境とプリプロダクションで動作

無料 · 4.9/5 (5,100件のレビュー)
1,500,000+ ユーザー

よくある質問

Huawei で最も一般的な CSS ビューポートは何ですか?

360 x 770 px は、参照されている 9 モデルのうち 8 に共有されており、Huawei Nova 7iとHuawei Mate 30 を含みます。この範囲で最初に確認すべき幅です。

Huawei デバイスをカバーするためにテストする最小幅は何ですか?

360 px、リスト内で最も狭いモデルの幅、Huawei Nova 7i。レイアウトが360 pxに収まる場合、9台のHuaweiデバイスに収まり、最も広いものは392 pxに達します。

Huawei が発表した解像度が CSS ビューポートと一致しないのはなぜですか?

これらの画面は、1 CSS ピクセルあたり複数の物理ピクセルを表示するためです。Huawei Nova 7i は 1080 x 2310 ピクセルのパネルと 360 x 770 px の CSS ビューポートを持ち、密度は 3 です。メディアクエリにはこの2番目の値を記述する必要があります。

Huawei デバイスを持たずにサイトをテストするにはどうすればよいですか?

Mobile FIRST拡張機能を使用して:これらのモデルの1のビューポート、ピクセル密度、User-Agent、およびタッチイベントをブラウザ内で直接再現します。localhostアドレスでも可能です。

引用されたブランドとモデルは、それぞれの所有者に帰属します。