交换移动设备的样式表答案

【问题标题】：Swap style sheets for mobile device交换移动设备的样式表
【发布时间】：2013-11-29 05:43:01
【问题描述】：

所以我一直试图让我的网站为移动设备加载单独的样式表。我已经尝试了所有媒体查询方式，我拥有的两个测试设备（三星 Note 2 和 iPad 2）都忽略了它们。

我在这里找到了这个脚本，它会弹出一个针对移动设备的警报，而且效果很好。所以我想知道是否可以使用此脚本将一个样式表换成另一个样式表？

     <script>
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))  || (navigator.userAgent.match(/iPad/))) {
   alert("we've got an iDevice, Scotty");
}

if (navigator.userAgent.match(/Android/)) {
   load("Droid me baby");
}
</script>

【问题讨论】：

这可能是一个重复的问题，stackoverflow.com/questions/12043983/… 我读到一些开发人员正在查看请求标头以检测设备从哪个浏览器发出请求。使用它和屏幕的最小/最大尺寸，他们能够推断出正在使用的设备。一个在线酒店预订网站向使用 iPhone、iPad 和 MAC 网络浏览器的客户显示更昂贵的搜索结果。呵呵。
贴一些你试过的代码，那些设备应该可以处理媒体查询
设备可以很好地处理媒体查询，但是基于分辨率的查询是无用的，因为现在大多数设备都配备了高分辨率屏幕。我也尝试使用“手持”媒体查询，但它似乎没有做任何事情。

标签： css mobile

【解决方案1】：

Respond.js 是一个很好的工具。我在我的网站上使用它来处理@media 查询，完全没有问题，即使对于 Internet Explorer 也是如此。

Galaxy Note 2 使用 Android，兼容 CSS 媒体查询。
iPad 2 使用 iOS Safari，也兼容媒体查询。

Reference for browser compatibilities

Respond.js

Very good article on responsive design that explains media query use well.

关于非响应式、非媒体查询 - 这是一个很好的工具，可以查看用户的浏览器可以/不能做什么：

Browscap

【讨论】：

媒体查询的问题在于，我必须根据设备、方向和屏幕尺寸来做一大堆查询来优化它。相反，如果我只专注于移动与屏幕，我可以赌大多数人以纵向模式使用他们的移动设备，并让样式表直接处理。我想如果我能让方面媒体查询正常工作，那也可以解决它。