Media Query

[Sora_Keyheart]

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:

Media Queries for Standard Devices | CSS-Tricks

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??

[SamA74]

@Sora_Keyheart

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.

Media Queries: Width vs. Device Width

Originally published at: http://www.sitepoint.com/media-queries-width-vs-device-width/ Far too often I see people don’t quite understand the differences between width and device-width (and expanding upon that, other examples such as min-device-width and max-device-width), when using CSS media queries. This misunderstanding results in poor code and ultimately more work for the developer. I’ve seen this question quite often over on the SitePoint Forums, so I felt it was time to give some further …

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.

[Sora_Keyheart]

I found something like this:
http://mydevice.io/devices/#sortSmartphones

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