css - 如何在网页中检测它正在移动 safari 或 websheet 上运行

Question

我有一个网页，我想检测它是否在 ipad 上的移动 safari 上运行。如果是这样，它应该加载不同的 css 文件（如果它在 websheet 上运行，那么它应该加载另一个 css）。我正在使用以下方式来处理 css，但它只显示了两种方式：

   <link rel="stylesheet" href="main.css?v=2">

   <link rel="stylesheet" media="handheld" href="css/handheld.css?v=2">

Answer 1

您是否使用编程语言来动态生成页面？如果是这样，您可以使用浏览器发送的用户代理，并根据它决定要包含哪个 css。

例子：

<script type="text/javascript">
    $("#btn_load_css").click(function(){
        var w = screen.width;
        var h = screen.height;
        $(document).append("<link rel='stylesheet' "
            +" href='css/defaults.css.php?w="+w+"&h="+h+"' />");
    });
</script>

这将导致 css 在文件末尾加载。

Answer 2

如果您主要关心的是视口大小，只需使用媒体查询。有关更简单的解释和一些示例，请参阅MDN 。