CODEWITHSUNDEEP
iphonecssipadstylesheetmedia-queries
user1269988
user1269988

Reputation: 105

CSS stylesheet that targets iPhone iPad not working

I have just a couple tweeks to make my website work on an iPad iPhone, just need to change some margins and some fonts sizes. I found this tutorial online that said to add this code:

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style_ipad.css" />
<!--<![endif]-->

so I added this right above the link to my normal stylesheet and uploaded style_ipad.css with my adjustments but it hasn't worked. Anyone know why this wouldn't work? Is this out of date?

Upvotes: 0

Views: 1947

Answers (2)

Suvi Vignarajah
Suvi Vignarajah

Reputation: 5788

When defining your media queries with "device-width" you must keep in mind that it is referring to the actual pixel width of the rendering screen (which gets tricky with the retina display) - see section 4.3 in http://www.w3.org/TR/css3-mediaqueries/. To get the actual width you'll have to use pixel ratios to account for it.

But you can also simply change your media query to check for the width of the browser/viewport that your document is outputed to. Simply remove the device portion of your queries:

<link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1024px)" href="css/style_ipad.css" />

Refer to these 2 responses on a more complete definition of the difference between device-width and width:

What is the difference between max-device-width and max-width for mobile web?

Difference between width and device-width in CSS media queries

Upvotes: 1

Jezen Thomas
Jezen Thomas

Reputation: 13800

It's not out of date, but since you said you added it above your normal stylesheet, it's quite likely your style rules are being overridden. They are cascading stylesheets, after all.

Also I'd like to point out that you've linked to the same file, css/style_ipad.css, in both link tags.

Upvotes: 2

Related Questions