-7

I want to test a website on a plasma screen. This screen is 55 inches wide, but has a resolution of 1024x768. So for testing purposes, I changed my laptop's resolution from 1600x936 to 1024x768, and the site that was being tested displayed the same results.

I want to be able to target this 1024x768 screen resolution (not the device width or max, or min-width) via media queries.

Can someone please help me with this? Again, my laptop is 17 inches widescreen, and the default display is 1600x960. I want to test a website for responsive design for 1024x768 resolution. Need an appropriate media query for that.

Russia Must Remove Putin
  • 374,368
  • 89
  • 403
  • 331
Muhammad Hasham
  • 219
  • 1
  • 5
  • 7
  • Did you search Google for media queries? [What have you tried?](http://mattgemmell.com/what-have-you-tried/) – elixenide Jun 29 '14 at 21:16

1 Answers1

0

I think this might be what you want: http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/

Edit:

I don't believe this is a duplicate, as it deals with the need to target the resolution and specifically NOT the device size.

Anyhow, click on the link above for a full analysis of this problem, but basically, I'll paraphrase here.

You can use the devicePixelRatio property to find out the DPR of your current device; unfortunately it’s not supported in Firefox for some reason, but it’s in all other major browsers:

console.log(window.devicePixelRatio);

Once you have your DPR (I’m going to use 1.5 as an arbitrary number throughout this article) you can start using it in your media query logic. 

@media (-webkit-min-device-pixel-ratio: 1.5) {}

All of this being the case, the minimum number of media features you need to test for device resolution across the major browsers is two:

@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
Alien Life Form
  • 581
  • 1
  • 7
  • 15
  • 1
    While this may answer the question, it is better to provide the actual information here and not just a link. [Link-only answers are not considered good answers and will probably be deleted](http://stackoverflow.com/help/deleted-answers). – elixenide Jun 29 '14 at 21:19
  • Added some of the info from that site, but really, this is a sort of complex thing, and a full reading is probably best for people landing here. Also, I don't think this is a duplicate, because it deals in screen resolution, not the window size (which the author calls "screen size") – Alien Life Form Jun 30 '14 at 19:06