Targeting the iPad with @media?

[JoblessPunk]

Hey,
So is there a way to target the iPad without affecting viewers of the same resolution (1024px)?

Here is my current CSS:

Code:

@media screen and (max-device-width: 1024px) {
#container {
width: 100%;
overflow-x: hidden;
}

#copyheader {
width: 100%;
overflow-x: hidden;
}

#copyfooter {
width: 100%;
overflow-x: hidden;
}

#copyshadow {
width: 100%;
overflow-x: hidden;
margin: 0 -38px 0 auto;
}

#bottom {
margin: 0 auto 0 65px;
}

#bottomhome {
margin: 0 auto 0 65px;
}
}

Here is my website I’m working on:
http://www.joblesspunkdesigns.com/

It works and is awesome on the iPad, but since I’m targeting the screen size 1024px it effects everyone that is using 1024px.

Could I add a User Agent to the @media maybe to target just the iPad? I’ve been Googling this and all I can find is people using "@media screen and (max-device-width: 1024px)" to target the iPad…

Any thoughts?
-tim

[TheDoc]

I’ll start by saying I don’t have an answer to your original question, but I’m not really sure why you’d need to ask it.

We should be designing for 1024px screens (which the iPad is).

Designing for 1024 does NOT mean having a width of 1024px as jamy_za mentions above. You should be in the range of about 960-980px. This will make sure there is no horizontal scroll (again, like jamy_za mentions he has).

[TheDoc]

"jamy_za" wrote:

I didn’t say designing for 1024 means having a width of 1024px. I said what I have started doing is having a max-width of 1024px, which is my preference at the moment.

But what benefit could an extra 40-60px really give you? Does the benefit truly outweigh having an ugly horizontal scroll bar on 1024 screens?

[JoblessPunk]

I’m not really saying I’m having a problem with my design, I just don’t really like targeting EVERYONE that is on 1024.
Let’s say I want to do use some of the touch-in touch-out features for the iPad, well I don’t want to inhibit everyone that is on 1024 just to optimize for the iPad.

Make sense?

[Author]

Posts