Writing CSS for different devices can be a pain in the ass. With Media Queries it’s easier, if you know how to pin point a specific device.
This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
For testing media queries, this is quite nice:
http://codeinchaos.github.com/mobile-screens/
or this one www.responsinator.com
Awesome 🙂
Very cool, thanks! 🙂
Hi,
I m designing web site for mobiles.But i m not getting how to add reference to original web site(which is already exist for larger screen)when the screen size is larger than 750px.
Plz help me its very urgent for me
There’s nothing “nice” about these alleged responsive testing sites; they NEVER match how you see it on the actual device.
Also note that that is mobile only (as you state). Desktops such as a 24″ 1920*1200 for example ending up at the second one, “Smartphones (landscape)”.
Worth mentioning is that android devices such as Galaxy Nexus from last year, and probably the newer ones, such as HTC One, Xperia Acro, Xperia S,Galaxy S3 and others, in this configuration end up (they have a pixel ratio of 2 and resolution of 1280*720 or (vice versa depending on landscape/portrait of course) end up at the last one, “iPhone 4”.
Desktop resolutions will not be adressed since I use device-width. For desktop use min-width and max-width instead of min-device-width and max-device-width.
I might need to add more media-queries for android based devices.
On the desktop device-width will give you the monitor size, which is useful if you want to target a “normal” desktop website that will *not* adjust with the browser window size. One of the most frequent misunderstandings is to think that device-width and device-height change with orientation. This is often not made clear enough. They don’t, even on iOS devices; they provide the absolute virtual viewport dimensions, irrespective of device orientation. So device-width is always the smaller value.
I spoke too soon. Turns out that quite a few mobile browsers also change their device-width response depending on the orientation of the device. Also, different browsers use different values for device-width for the same device, so you can’t really depend on it. Combined with the increasing number of hi-res phones and tablets that are difficult to distinguish from desktop devices — even though they need different layout because of screen size — the situation is becoming more and more unclear.
It would have been great if someone had thought of a media query parameter like device-screen-diagonal that would provide the screen dimensions in mm. That would solve a LOT of problems. Sigh…
what is media quiery for Android Phone (Samsung Gallaxy note)?
sorry, cannot help you there. I have no android devices in my drawer to test that :/
/* The New iPad (iPad 3) ———– */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}
Thats not true, iPad3 has the same device-width like iPad2 only doubled pixel-ratio.
I have set up a little page allowing people to view the values of their media features, pretty useful to figure out what to use on which device. Hope that helps.
http://pieroxy.net/blog/pages/css-media-queries/test-features.html
That’s nice!
How did you get the screen width and height? I tested on my lg-ms770 and it was correct. Is this a script we can use on our on projects?
Well, I got the width and height by successively trying different media queries (like, hundreds of them) and seeing the largest one that gets triggered by the browser. I don’t think it is a good idea to reuse this for anything else than a detection system… What did you have in mind?
Impressive, thanks for the effort. This makes our easy to just copy and paste your responsive CSS media queries.
thankyou for sharing, and all the comments above me, it’s really helped! 🙂
Nice article but… Who wrote it first? I found the exact same CSS here…
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
and I found much of it on a forum somewhere. It’s not like I invented something. This is just a snippet 🙂
Nice tutorial.
Is it only iphone and ipad? I have used in android 10 inches tabs. I have used
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
//here is my style
}
But problem is that on first time it is working fine. When i move to landscape it also works. But again i move to portrait my tab then it does not work. Always landscape works. But from second time portrait does not works all.
Please help me…
Thanks