4

I would like to add the new Google phones to the Emulated Devices in Chrome's dev tools.

Does anyone know the correct custom device settings for the Pixel 3 and Pixel 3 XL?

Maelish
  • 1,419
  • 4
  • 18
  • 25
  • 1
    There's a great list of modern devices, along with viewport dimensions, pixel ratios and user agent strings here: https://www.danhendricks.com/2018/04/adding-iphone-galaxy-chrome-mobile-emulated-devices/#heading_device_data – jackocnr Sep 24 '19 at 13:43

3 Answers3

8

You must enter the viewport size on the google dev center, not screen resolution. So the viewports for pixel 3 and pixel 3 xl are as below.

Pixel 3: 412 x 824 aspect ratio: 16:9 ~ Device pixel ratio: 1.7
Pixel 3 xl: 412 x 847 aspect ratio: 16:9 ~ Device pixel ratio: 1.7

Amirhossein Rahmati
  • 93
  • 1
  • 3
  • 7
  • 4
    Not sure why it is different than Amirhossein suggestion, but [mydevice.io](https://www.mydevice.io/) loaded in Chrome on my Pixel 3 (purchased in Nov 2019) says: - Pixel 3: **393 x 786** aspect ratio: 16:9 ~ Device pixel ratio: **2.75** and this way the result on the Chrome DevTools matches with what I see on my device – Stefano Dec 05 '19 at 18:44
2

you can use something like this to know you device details :

   <!DOCTYPE html>
<html>
<body>

<button onclick="OutputDeviceInfo()">Click me</button>

<p id="width"></p>
<p id="height"></p>
<p id="ratio"></p>

<script>

    function OutputDeviceInfo() {
      let deviceWidth = window.screen.width;
      let deviceHeight = window.screen.height;
      let devicePixelAspectRation = window.devicePixelRatio;

    document.getElementById("width").innerHTML = deviceWidth;
    document.getElementById("height").innerHTML = deviceHeight;
    document.getElementById("ratio").innerHTML = devicePixelAspectRation;

      console.log('Width: ' + deviceWidth);
      console.log('Height: ' + deviceHeight);
      console.log('Pixel  Ratio: ' + devicePixelAspectRation);
    }
</script>

</body>
</html>
Amit Golhar
  • 629
  • 3
  • 8
  • 19
  • I created a CodeSandbox using the code above, just open it on your device: https://codesandbox.io/s/get-device-details-hm6i8 – j3ff Apr 16 '21 at 13:13
-5

Press F12 on Chrome Browser >> Click on toggle device tool bar (on left side small mobile icon) >> click on drop-down option where you can see spme list of devices are there, you can see last option "Edit"- click on that Edit option>> click on "Add custom device" button enter the details for your targets device

Amit Golhar
  • 629
  • 3
  • 8
  • 19
  • Er right. Now, what are the custom settings to add those missing devices. – Maelish Feb 15 '19 at 14:40
  • what are the custom settings to add those missing devices - What do you mean? media query or the way how we can add to chrome Emulator? – Amit Golhar Feb 15 '19 at 14:42