Media Query

I am now done with my website but I have had difficulties with media queries.

I went to this website to take the media query code for most devices sizes:

I tried the codes, but they aren’t working, they are like this:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {


then I changed it to this:

@media (max-width: 320px) {


and that worked, can you explain to me why that detailed code isn’t working please??

Targeting specific devices, screen sizes or orientations is the wrong approach, as is using device-width rather than just width, don’t do it.

Always create queries at a point that your design requires it. This way is much simpler and should work for any device, not just the few of the thousands that you choose to cater for.


I found something like this:

I would be using the CSS width x height in pixels. I was confused about that too until I found this website. I never thought about device “Physical” width and “CSS” width.

Plus your explanation is helpful, thank you very much

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.