6 デバイス · スマートフォン
Xiaomi デバイス: CSS ビューポート、密度、画面解像度
Xiaomi デバイス 6 の表示特性が参照されており、それぞれのメディアクエリが反応する幅、ピクセル密度、パネル解像度が示されています。これらのデバイスのうち 2 はブラウザで直接テストできます。
スマートフォン Xiaomi
2 の異なる CSS 幅が全範囲をカバーしています：360 と 393 px。複数のモデルが同じ幅を共有しているため、1つを検証するだけで他のものも検証できます。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Xiaomi 12 2022 | 360 × 800 | 3x | 1080 × 2400 | 6.7" | 2022 |
| Xiaomi Mi 11i | 360 × 800 | 3x | 1080 × 2400 | 6.7" | 2021 |
| Xiaomi Redmi Note 9 Pro | 393 × 873 | 2.75x | 1080 × 2400 | 6.7" | 2020 |
| Xiaomi Redmi Note 7 | 393 × 851 | 2.75x | 1080 × 2340 | 6.3" | 2019 |
| Xiaomi Redmi Note 8 | 393 × 851 | 2.75x | 1080 × 2340 | 6.3" | 2019 |
| Xiaomi Redmi Note 8 Pro | 393 × 851 | 2.75x | 1080 × 2340 | 6.5" | 2019 |
優先的にテストする幅
最も多くのモデルで使用されている幅は 360 と 393 px です。これらを最初に確認することで、参照されている Xiaomi モデル 6 のうち 6 をカバーし、最初のブレークポイントを設定する必要があります。
360 pxまで下げて、Xiaomi 12 2022を含むすべての範囲をカバーします。この幅に収まるレイアウトはどこでも収まります。まだ流通している最も古いモデルも含まれます。
高さに注意してください。モバイルブラウザはインターフェースバーで表示領域を縮小し、スクロールするとこれらが縮小します。そのため、100vh の高さは最初の画面を超えます。svh と dvh の単位が推奨されます。
Xiaomi デバイス 2 でサイトをテスト、1つも購入せずに
表は測定値を示します。拡張機能は、モデルの正確なビューポートでサイトを表示し、その密度、User-Agent、および縦向きまたは横向きの切り替えを行います。
- Xiaomi デバイス 2 がすぐに使用可能、古いモデルから今年の新作まで
- デバイス形式でエクスポートされたキャプチャとビデオ
- ローカル環境とプリプロダクションで動作
無料 · 4.9/5 (5,100件のレビュー)
1,500,000+ ユーザー
よくある質問
Xiaomi で最も一般的な CSS ビューポートは何ですか？
393 x 873 px は、参照されている 6 モデルのうち 4 に共有されており、Xiaomi Redmi Note 9 ProとXiaomi Redmi Note 7 を含みます。この範囲で最初に確認すべき幅です。
Xiaomi デバイスをカバーするためにテストする最小幅は何ですか？
360 px、リスト内で最も狭いモデルの幅、Xiaomi 12 2022。レイアウトが360 pxに収まる場合、6台のXiaomiデバイスに収まり、最も広いものは393 pxに達します。
Xiaomi が発表した解像度が CSS ビューポートと一致しないのはなぜですか？
これらの画面は、1 CSS ピクセルあたり複数の物理ピクセルを表示するためです。Xiaomi 12 2022 は 1080 x 2400 ピクセルのパネルと 360 x 800 px の CSS ビューポートを持ち、密度は 3 です。メディアクエリにはこの2番目の値を記述する必要があります。
Xiaomi デバイスを持たずにサイトをテストするにはどうすればよいですか？
Mobile FIRST拡張機能を使用して：これらのモデルの2のビューポート、ピクセル密度、User-Agent、およびタッチイベントをブラウザ内で直接再現します。localhostアドレスでも可能です。
引用されたブランドとモデルは、それぞれの所有者に帰属します。