0

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?

user1269988
  • 105
  • 1
  • 1
  • 10
  • If you go to your profile you can see the questions that you have asked previously and then if there is an answers that solved you problem or question you can click the check box under the votes. – brenjt Jun 13 '12 at 02:40

2 Answers2

2

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.

Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
  • I put it below and it still doesn't work; I was under the impression that this code will only use the style sheet if the client is 1024 or under otherwise it uses my normal style sheet – user1269988 Jun 13 '12 at 00:46
  • and I did mean to link to css/style_ipad.css because the adjustments I need to make will work for both iPad and iPhone – user1269988 Jun 13 '12 at 00:48
1

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

Community
  • 1
  • 1
Suvi Vignarajah
  • 5,758
  • 27
  • 38