CODEWITHSUNDEEP
htmlcssmedia-queries
Shai UI
Shai UI

Reputation: 51928

Not specifying pixels for media queries?

I have a phonegap based html app that I'd like to show on both desktop/ipad and mobile.

I was looking into media-queries but it seems pretty cumbersome that I need to specify min/max px. and do a separate media query for each type of mobile so for example iphone4, iphone5, iphone6, iphone6plus, etc because they have different sized screens.

What I want basically is to set up a css where I say, "for all mobile devices in landscape do this", and "for all mobile devices in portrait do this". I don't want to get into specifics about WHICH type of mobile device it is or fiddle around with specific screen dimensions. I don't even want the word "px" to appear in my media query basically.

Similarly I want to know if it's a tablet portrait/landscape. And if it's a desktop.

Is there an easy way to do this with media queries?

Upvotes: 1

Views: 63

Answers (1)

ckuijjer
ckuijjer

Reputation: 13814

You're correct in not wanting to create different layouts for every specific mobile device, as it will be an ever increasing list of devices it isn't robust at all. However making the distinction between desktop and mobile also isn't easy. Just think about the screen resolution of a tablet versus a netbook pc, they are almost alike.

In my opinion the best way to design your breakpoints is to start with a mobile view and to keep expanding the screen size until you think that the design doesn't work anymore. At that point you should include a breakpoint and update your design (perhaps add a sidebar, show an expanded menu etc).

So unfortunately I think that there isn't an easy way to distinguish between mobile an desktop devices, the only easy option would be to find a pixel based breakpoint (bootstrap uses 992px) from which your desktop design should apply.

To make the distinction between portrait and landscape mode you can use @media screen and (orientation: portrait) and @media screen and (orientation: landscape).

For example you could use something like this:

.container {
    /* mobile devices */
}

@media screen and (orientation: landscape) {
    /* mobile devices in landscape */
}

@media screen and (orientation: landscape) and (min-width: 992px) {
    /* desktop devices */
}

Upvotes: 2

Related Questions