Question

因此，我一直试图让我的网站为移动设备加载单独的样式表。我已经尝试了所有的媒体查询方式，我拥有的两个测试设备（Samsung 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>

Answer 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

交换移动设备的样式表

1 个答案: