Question 199748 in CSS Question posted in
Some basic documentation can be found here.

Css – What Device Pixel Ratio should I give to simulate bigger screens in my 1920×1080 laptop?

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):

  1. For 1920×1080: DPR of 1
  2. For 2560×1440: DPR of 1.5
  3. For 3840×2160: DPR of 2

Even if it varies upon company to company or device to device, just tell me the common values.

Tags:

2

Answers


  1. 0

    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:

    console.log(window.screen.width)
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search