HOW TO ADD CHROME’S EMULATED DEVICES (iPhone Xs / iPhone Xs Max)

    ,     No comments
if you want to add new emulated mobile devices into chrome developer tool follow this process:

  1. Open the Developer Tools pane (CTRL+SHIFT+I)
  2. Press (F1) then Devices and clicking the Add custom device button

New Device Data

Here is the data for some current devices: Click the link below to find all devices. 
Device Name Width Height
iPhone Xs 375 812
iPhone Xs Max 414 896
iPhone XR 414 896
Samsung Galaxy S9 360 740
Samsung Galaxy S9+ 320 658
Samsung Galaxy Note 9 412 846
Pixel 3 393 786
Pixel 3 XL 412 846
iPhone X 375 812
Palm PVG100 360 640
iPhone 8 Plus 414 736
iPhone 8 375 667
iPhone 7 Plus 414 736
iPhone 7 375 667
iPhone SE 320 568
iPad Mini 4 768 1024
iPad Pro (10.5") 834 1112
iPad Pro (12.9") 1024 1366
Red Hydrogen One 412 732
Samsung Galaxy Tab S3 768 1024
Samsung Galaxy Note 8 412 846
Samsung Galaxy S8 360 740
Samsung Galaxy S8+ 412 846
Samsung Galaxy S7 360 640

Media Queries

/* 1792x828px at 326ppi iPhone XR */
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 2)
    {}

    /* 2436x1125px at 458ppi iPhone XS*/
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3)
    {}

    /* 2688x1242px at 458ppi iPhone XS Max*/
@media only screen and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3)
    {}

Continue Reading...

spacer