CODEWITHSUNDEEP
cssmobile
brony4lyfcuzponiesrule
brony4lyfcuzponiesrule

Reputation: 331

Is there a way to make desktop-only CSS rules?

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

Upvotes: 33

Views: 121843

Answers (4)

asdjfiasd
asdjfiasd

Reputation: 1730

@media (pointer: fine) {
    body {
        background-color: red;
    }
}

Upvotes: 8

Hugo Nava Kopp
Hugo Nava Kopp

Reputation: 3064

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...*/
        }
    }

Upvotes: 12

Luis Evrythng
Luis Evrythng

Reputation: 1095

The gap between mobile and desktop devices is getting closer and closer -consider, for example, tablets or the recently new hybrid devices.

As Aaron points, you might want to define different rules based on device screen (min-width or max-width). Eg:

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

A different criteria you might want to use is targeting devices based on the their screen capabilities:

Upvotes: 5

Aaron
Aaron

Reputation: 11693

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
}

Upvotes: 55

Related Questions