Émuler iPhone X sur Chrome

Question

Je dois émuler un iPhone X sur Chrome. J'ai trouvé les informations ci-dessous:

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

Pouvez-vous me dire quelles valeurs dois-je donner au formulaire ci-dessous?

Spécificités iPhone X

 

C’est ce que Rapport de pixels de périphérique (DPR) est

Si vous souhaitez émuler un périphérique Retina à partir d'une machine autre que Retina ou inversement, ajustez le rapport de pixels du périphérique. Le ratio de pixels de périphérique (DPR) est le rapport entre les pixels logiques et les pixels physiques. Les périphériques avec écrans Retina, tels que le Nexus 6P, ont une densité de pixels supérieure à celle des périphériques standard, ce qui peut affecter la netteté et la taille du contenu visuel.

Answer 1

Selon les directives d'interface humaine pour l'iPhone X , vous devez entrer:

• 375 pour le width
• 812 pour le height
• 3 pour le rapport de pixels périphérique

Étant donné que le facteur d'échelle est 3, vous devez diviser la résolution physique (1125px × 2436px) par 3 pour obtenir la résolution logique.

Pour la chaîne user agent, consultez cette réponse .

Answer 2

Pour calculer la résolution en pixels du périphérique, utilisez la valeur PPI qui correspond à 458ppi en fonction du lien fourni.

Selon cette réponse ,

458/150 = 3 DPR

Pour calculer la hauteur et la largeur,

utilisez la résolution physique donnée: 2436x1125 pixels.

• 2436/3 = 812 (hauteur)
• 1125/3 = 375 (largeur)

C'est la résolution de pixel logique.

Pour plus d'informations: https://stackoverflow.com/a/21413366/4826457

Answer 3

La première image doit figurer dans le répertoire img enregistré sous le nom iphonex.png ou changer le code commençant par img.src La deuxième image est la capture d'écran du résultat.

La fonction Javascript ajoutera dynamiquement l'iphone x notch . IPhoneX (); sur la première ligne devrait s’exécuter après le chargement du contenu 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'));
    }
}