Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Emulate iPhone X on Chrome

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.

like image 364
Sampath Avatar asked Nov 29 '17 12:11

Sampath


People also ask

Where is the device tab for simulating mobile devices?

If there is a need to add a new mobile resolution to a predefined list, we can simply do that in Developers Tool Menu (F11) > Devices tab. On this tab we can enable/disable existing devices or add a new one.

Can iOS run Chrome?

Chrome is available for: iPad, iPhone, and iPod Touch. iOS 12 and up. All languages supported by the App Store.

How do I simulate different resolutions in Chrome?

From the toolbar, you can select a specific mobile device and size as well as show the actual device frame by clicking the Device Mode icon. Chrome will emulate different devices with viewport sizes, and other features. To activate Device Mode, simply click the Device Mode icon at the top of the Developer Tools window.


2 Answers

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.

like image 102
Tamás Sengel Avatar answered Nov 15 '22 18:11

Tamás Sengel


To calculate Device Pixel Resolution, use the PPI value which is 458ppi according to the link provided.

According to this answer,

458/150 = 3 DPR

To calculate height and width,

use the given physical resolution: 2436x1125-pixel resolution.

  • 2436/3 = 812 (Height)
  • 1125/3 = 375 (Width)

This is the logical pixel resolution.

For more info:https://stackoverflow.com/a/21413366/4826457

like image 20
Suraj Rao Avatar answered Nov 15 '22 18:11

Suraj Rao