CODEWITHSUNDEEP
cssipadresponsive-designmedia-queriesdesktop
Fredrik P
Fredrik P

Reputation: 694

Media query min-width:1000px including iPad landscape

How can I target devices which are wider than 1000 pixels? That is, including iPad in landscape mode and most desktops but excluding iPad in portrait mode.

I have found how to target iPad specifically:

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

However, I would prefer if my media queries could be shaped by at what widths the content prompted layout changes rather than by specific devices.

Upvotes: 1

Views: 11584

Answers (2)

David Taiaroa
David Taiaroa

Reputation: 25485

If I understand your question correctly, you don't need to try and target specific devices at all.

In your main CSS just include: 

@media (min-width: 1000px) {

/* CSS styles for viewports 1000px and up */  

}

and in the head of your page include 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

EDIT
Here is a working example which you can check in an iPad:
Live: http://fiddle.jshell.net/panchroma/Bn4ah/show/
Code view: http://fiddle.jshell.net/panchroma/Bn4ah

Good luck!

Upvotes: 2

MikeZ
MikeZ

Reputation: 866

While that article you referenced from CSS-Tricks is a very handy reference (and Chris Coyier is my nerd-idol) it may be a bit misleading. Media queries at their core are just fancy if statements, and if the entire statement evaluates as true, then the corresponding style sheet or style rules are applied, following the normal cascading rules.

Let's look at a common media queries:

@media screen and (min-width: 768px) { ... }


Notice the screen parameter. It says nothing about the device width nor browser chrome. Read in plain English, it says "if the media we're working on is the screen, and if that screen is a minimum of 768px or bigger, use these styles.

So, to answer your question: to target screens that are larger than 1000px wide, try this:

@media screen and (min-width: 1000px) { ... }

Just remember that you're targeting all screens at least 1000 pixels wide. If you need to target specific devices, I recommend using JavaScript to handle specific UserAgent targeting.

Upvotes: 1

Related Questions