只为 ipad 加载 css 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4880603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load css file for ipad only
提问by John
Im trying to load a css file for ipad only. I tried this:
我正在尝试仅为 ipad 加载 css 文件。我试过这个：
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">
It works for iPad but if I lower my resolution to 1024 by 768 on my desktop and view the site in firefox the ipad stylesheet loads as well. So I tried:
它适用于 iPad，但如果我在桌面上将分辨率降低到 1024 x 768 并在 Firefox 中查看该站点，ipad 样式表也会加载。所以我试过：
<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">
But still same issue. How can I make sure this stylesheet ONLY loads if they are viewing the page on a iPad?
但还是同样的问题。我如何确保仅当他们在 iPad 上查看页面时才加载此样式表？
采纳答案by MattoTodd
What technology are you using? If you have control over what you are rendering (server side) to the page you can check for the USER-AGENT header in the request. If it contains the string iPad, then render out the css tag, if not, don't include it.
你在使用什么技术？如果您可以控制向页面呈现的内容（服务器端），您可以检查请求中的 USER-AGENT 标头。如果它包含字符串 iPad，则渲染出 css 标签，如果没有，则不要包含它。
If you are just delivering static html, this will not work.
如果您只是提供静态 html，这将不起作用。
回答by John
From: http://css-tricks.com/snippets/css/ipad-specific-css/
来自：http: //css-tricks.com/snippets/css/ipad-specific-css/
This works better for me.
这对我来说效果更好。
@media only screen and (device-width: 768px) {
/* For general iPad layouts */ }
/* 对于一般的 iPad 布局 */ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */ }
/* 仅适用于纵向布局 */ }
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */ }
/* 仅适用于横向布局 */ }
回答by Glycerine
回答by Benjamin
Due to many different screen sizes and resolutions I was not able to only use media queries for this issue.
由于许多不同的屏幕尺寸和分辨率，我不能只针对这个问题使用媒体查询。
I include http://www.modernizr.com/in all of my projects already, so I was able to use a combination. Modernizr will add a class of .touch on touch enabled devices. I'd suggest trying to use .touch to determine that it's not a PC, then the media query to narrow down what mobile device it is.
我已经在我的所有项目中包含了http://www.modernizr.com/，所以我能够使用组合。Modernizr 将在支持触摸的设备上添加一类 .touch。我建议尝试使用 .touch 来确定它不是 PC，然后使用媒体查询来缩小它是什么移动设备的范围。
