web-dev-qa-db-ja.com

ChromeでiPhone Xをエミュレートします

ChromeでiPhone Xをエミュレートする必要があります。以下の情報を見つけました：

Height: 5.65 inches (143.6 mm)
Width: 2.79 inches (70.9 mm)

以下のフォームにどの値を入力すればよいか教えていただけますか？

iPhone Xの仕様

unknown form elements

これが デバイスピクセル比（DPR） です

Retina以外のマシンからRetinaデバイスをエミュレートする場合、またはその逆の場合は、デバイスのピクセル比を調整します。デバイスピクセル比（DPR）は、論理ピクセルと物理ピクセルの比率です。 Nexus 6PなどのRetinaディスプレイを搭載したデバイスは、標準デバイスよりもピクセル密度が高いため、ビジュアルコンテンツの鮮明さとサイズに影響を与える可能性があります。

iosgoogle-chromegoogle-chrome-devtoolsiphone-x
5
Sampath

iPhone Xヒューマンインターフェイスガイドライン に従って、次のように入力する必要があります。

  • 375widthの場合
  • 812heightの場合
  • 3デバイスのピクセル比率

スケール係数は3であるため、divide物理解像度（ 1125px×2436px）×3で論理解像度を取得します。

user agent stringについては、 this answer を確認してください。

9
Tamás Sengel

デバイスのピクセル解像度を計算するには、PPI=の値を使用します。これは、提供されているリンクによると458ppiです。

この答え によると、

458/150 =3 DPR

高さと幅を計算するには、

指定された物理解像度を使用します：2436x1125ピクセルの解像度。

  • 2436/3 = 812（高さ）
  • 1125/3 = 375（幅）

これは論理的なピクセル解像度です。

詳細： https://stackoverflow.com/a/21413366/4826457

1
Suraj Rao

最初の画像は、iphonex.pngとして保存されたimgディレクトリにあるか、img.srcで始まるコードを変更する必要があります。2番目の画像は、結果のスクリーンショットです。

JavaScript関数はiphone xノッチを動的に追加します。 iPhoneX（）;最初の行は、DOMコンテンツが読み込まれた後に実行する必要があります。

iPhoneX();
window.onresize = window.onorientationchange = function() {
    //Your other functions
    setTimeout(iPhoneX,100);
}

function iPhoneX() {
    if (window.innerWidth == 375 && window.innerHeight == 812) {
        if (!document.getElementById('iphone_layout')) {
            var img = document.createElement('img');
            img.id = 'iphone_layout';
            img.style.position = 'fixed';
            img.style.zIndex = 9999;
            img.style.pointerEvents = 'none';
            img.src = 'img/iphonex.png'
            document.body.insertBefore(img,document.body.children[0]);
        }
    } else if (document.getElementById('iphone_layout')) {
        document.body.removeChild(document.getElementById('iphone_layout'));
    }
}

iphone_layout.png

screenshot

0
gdarcan