Search code examples
firefoxresponsive-designfirefox-developer-tools

How can I add a high resolution device to Responsive Design Mode?

I've added an iPhone X to Firefox Responsive Design Mode:

enter image description here

This is the correct resolution, and Device Pixel Ratio for an iPhone X:

2436x1125-pixel resolution at 458 ppi

However when using the custom device, Firefox shows the device to be massive. It seems to ignore the DPR on the device completely.

enter image description here

How can I add a high resolution device to Responsive Design Mode?

Solution

  • Since nobody else has answered, and I've found something myself:

    Divide the real pixel size by the DPR and enter that as the 'Size'.

    • 1125 / 3
    • 2436 / 3

    So for an iPhone X, if you want to cut and paste, you'd enter:

    • 375
    • 812
    • 3
    • Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A356 Safari/604.1

    This is odd, as you've already entered the DPR and would expect Firefox to calculate this for you, but that's how it works.

    enter image description here