I am practicing media queries in CSS. I have a 1920x1080 laptop and I want to simulate bigger screens to test the responsiveness of my website. Chrome and Firefox only have phones and tablets by default but I want to simulate the bigger screen too!! So when I tried adding custom size, it is also asking me to input a Device Pixel Ratio (DPR). I have heard that 1920×1080 screens should have DPR of 1 but when I simulated my own screen resolution (which as I mentioned is 1920×1080), it kind of looked different than what it looks normally on my screen.
I also found this information (not sure if it is correct):
- For 1920×1080: DPR of 1
- For 2560×1440: DPR of 1.5
- For 3840×2160: DPR of 2
Even if it varies upon company to company or device to device, just tell me the common values.
2
Answers
To test higher resolutions, you can change the view in your browser. Usually with CTRL+- or CTRL+ScrollDown.
Run the below snippet to see the current resolution:
If your laptop has 1920×1080 maximum resolution then make sure it is set in the display settings of your device. After that you can open your website in your browser and start testing. It will be exactly 1920px in width and you will get 1080px height when you go Full Screen. You don’t have to simulate this resolution. But when you need to increase or decrease the resolution for testing then you can simulate using the browser.