I found out my Droid has a max width of 800 pixels, which I think some lower-resolution computers are smaller than, but I want my Droid to display the mobile CSS, so I am not sure max device width is the best solution. So does anybody know how I'd design my CSS link tags so that the mobile CSS is used only by smartphones while the desktop CSS is used only by desktop computers (including the kind with a width under 800px)?
Responsive Web Design, using media-queries
@media screen and (min-width: 800px) {
// this css will only be used when the screen size is min 800px
}
I tried the solutions above, but they didn't work for iPad in landscape mode. The iPad Landscape is 1024 px. So my solution was:
@media only screen and (min-width: 1025px) {
.myClass {
/*...your desktop-only style...*/
}
}
@media (pointer: fine) {
body {
background-color: red;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With