Question

我必须加载不同的样式表，具体取决于用户代理是iPad还是其他。我知道，一般来说，检测浏览器并不是最奇妙的想法，可能会在将来的某个时候削弱我们的可维护性......不是我的决定。

所以这里我们有一些JavaScript来检测用户代理。它不起作用。我可能错误地逃脱了某些事情。我得到的错误是一个红色鲱鱼（对象引用），但只在我执行JavaScript时出现。

    $(document).ready(function () {
        alert('ready fired');
        if (navigator.userAgent.indexOf("iPad") != -1) {
            //alert('bleep bloop blop...iPad detected');
            var stringToWrite = '<script src=\'\<\%\= ResolveUrl("~/Scripts/iscroll.js") \%\>\' type="text/javascript"><\/script>';
            stringToWrite += '<link href=\'\<\%\= ResolveUrl("~/Stylesheets/scrollbar.css") \%\>\' rel="stylesheet" type="text/css" \/>';
            stringToWrite += '<link href=\'\<\%\= ResolveUrl("~/Stylesheets/iPadCommon.css") \%\>\' rel="stylesheet" type="text/css" \/>';
            alert(stringToWrite);
            document.write(stringToWrite);
        }
        //else
        //alert('bleep bloop blop...who cares browser');
    });

Answer 1

在互联网上随机发现：

//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)

http://www.javascriptkit.com/javatutors/navigator.shtml

Answer 2

您可能应该考虑在服务器端检测代理，否则它将无法用于禁用javascript的浏览器。

Answer 3

如果可能，您应该使用@media handheld来使用特定于手持设备的样式规则。

如果它当然也是如此，即如果你需要不同的iPad用于iPhone与iPhone对比Android，你应该进行服务器端检测并将CSS类添加到<html>和/或{{1} }标签，比如

<body>

或

<html class="android">

Quentin的评论是正确的 - 尝试编写服务器端元标记<body class="iOS"> 将无法正常工作因为服务器没有运行javascript所写的内容。服务器已完成处理。

加载样式表取决于用户代理

3 个答案: