问题
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?
回答1:
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.
回答2:
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
来源：https://stackoverflow.com/questions/11006754/css-stylesheet-that-targets-iphone-ipad-not-working