Content
Target the iPad with CSS media queries
onsdag 15 september 2010 - Filed under CSS
Media queries can still be confusing for a lot of us, and people are using them differently. When looking for a way to target the iPad specifically, I found a number of different solutions. This is the one I prefer.
Using the max-device-width lets you know that this is a device with a maximum of 1024 pixels. Then use the width property to limit the query to match the size of the iPad, which is 1024 pixels on the long side, and 768 on the short side. Obviously, if there is another tablet with the exact same specifications–and if not, there surely will be–it will display the same styles.
@media screen and (max-device-width:1024px) and (width:1024px) { /* iPad landscape styles*/ }
@media screen and (max-device-width:1024px) and (width:768px) { /* iPad portrait*/ }
I believe this is as iPad specific as it gets.
2010-09-15 » Asgeir
- Browse in category: CSS -
- < Comic Sans, scooch over, we have Rosewood!
- > CSS3 ribbon effect
- Browse in timeline
- < Google ‘Streaming’ search
- > Single input login
Talkback x 2
Share your thoughts
Re: Target the iPad with CSS media queries
4 oktober 2010 @ 21:38
What happens if you go smaller? Will the screen stretch on the iPad or will it just leave more of the background on the page as a normal browser would do?
6 oktober 2010 @ 19:44
Go smaller with what?
If you change any of the sizes in the query, the iPad simply won’t recognise it. You can use orientation:portrait instead, which will make your styles apply to any device in portrait mode (including a desktop browser window in portrait format.)