Emulate iPhone X on Chrome

ios google-chrome google-chrome-devtools iphone-x
Sampath picture Sampath · Nov 29, 2017 · Viewed 17.1k times · Source

I need to emulate an iPhone X on Chrome. I have found the info below:

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

Can you tell me which values should I give to the form below?

iPhone X sepecifications

unknown form elements

This is what Device pixel ratio (DPR) is

If you want to emulate a Retina device from a non-Retina machine or vice versa, adjust the Device pixel ratio. The device pixel ratio (DPR) is the ratio between logical pixels and physical pixels. Devices with Retina displays, such as the Nexus 6P, have higher pixel density than standard devices, which can affect the sharpness and size of visual content.

Answer

Tamás Sengel picture Tamás Sengel · Nov 29, 2017

According to the iPhone X Human Interface Guidelines, you should enter:

  • 375 for the width
  • 812 for the height
  • 3 for the device pixel ratio

Because the scale factor is 3, you should divide the physical resolution (1125px × 2436px) by 3 to get the logical resolution.

For the user agent string, check out this answer.

Related questions

Is there any way to debug chrome in any IOS device

Is there any way to debug chrome browser on IOS device? If there is no way, how i can approach to bug in chrome on ios? Searched the web and didn't find sufficient answer.

Read More
Create iOS Home Screen Shortcuts on Chrome for iOS

I have a web app that allows the user to add the web page to his home screen on the iphone. That functionality exists with Safari. Now they released the chrome browser for the iphone too. My question is how …

Read More
iOS Chrome detection

I use Javascript code if( (Android|webOS|iPhone|iPad|iPod|BlackBerry).test(navigator.userAgent) ) {} for mobile device detection, but Chrome at iOS is not detected. Is there a way to detect it? Thanks.

Read More