Javascript到特定于移动服务器的CSS_Javascript_Html_Css_Mobile

Javascript到特定于移动服务器的CSS

javascript html css mobile

Javascript到特定于移动服务器的CSS,javascript,html,css,mobile,Javascript,Html,Css,Mobile,我需要为移动浏览器提供特定的CSS。我不想通过媒体大小或形状来检测手机浏览者。我想使用navigator.userAgent.match来完成下面是我正在使用的代码片段，但似乎不起作用。这里的意图是javascript将检测移动浏览器并为mobile.css提供href，否则将提供普通的css <!DOCTYPE html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&g

我需要为移动浏览器提供特定的CSS。我不想通过媒体大小或形状来检测手机浏览者。我想使用navigator.userAgent.match来完成

下面是我正在使用的代码片段，但似乎不起作用。这里的意图是javascript将检测移动浏览器并为mobile.css提供href，否则将提供普通的css

    <!DOCTYPE html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Home - Test code</title>
    <script>
        var text = "";
        if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            text = "'mobile.css'";
        } else {
            text = "'screen.css'";
        }
        document.getElementById('insertStyle').href=text
    </script>
    <link id="insertStyle" rel="stylesheet" href="null">
    </head>


家庭测试代码
var text=“”；
if（navigator.userAgent.match（/Android/i）| navigator.userAgent.match（/webOS/i）| navigator.userAgent.match（/iPhone/i）| navigator.userAgent.match（/iPod/i））{
text=“'mobile.css'”；
}否则{
text=“'screen.css'”；
}
document.getElementById（'insertStyle'）。href=text

目前，代码根本不起作用，只将样式表的href保留为“null”。对于如何修补代码的任何指导，我将不胜感激。

两件事：

删除

“'mobile.css'

和

“'screen.css'

中的

”

。您已经将文本置于引号中，无需重复两次

让JavaScript添加元素。现在，当代码运行时，元素不存在，因此从

getElementById

获得

null

因此，大致如下：

var link = document.createElement("link");
link.rel = "stylesheet";
if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
    link.href = "mobile.css";
} else {
    link.href = "screen.css";
}
document.getElementsByTagName("head")[0].insertChild(link);

多亏了T.J.Crowder和对我问题的评论，我最终使用的代码看起来是这样的。我最终使用了浏览器嗅探、方向和最大宽度，以便在几乎任何情况下都能正确切换样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Home - Finished version</title>
<meta name="keywords" content="stuff">
<meta name="description" content="more stuff">
<meta name="author" content="Me">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link id="insertStyle" rel="stylesheet" href="screen.css">
<script src="detectMobile.js"></script>
<link rel="stylesheet" media="all and (orientation: portrait)" href="mobile.css" />
<link rel="stylesheet" media="screen and (max-width: 700px)" href="mobile.css" />
</head>

<body onload="detectMobile();" bgcolor="#ffffff" White center no-repeat scroll;>
<a style="display:none;" href="#maincontent">Skip to main content</a> 
<a style="display:none;" href="sitemap.html">Sitemap</a> 
<div id=maincontent>Lorum Ipsum</div>
</body>
</html>

谢谢大家。

为什么有“和”。尝试删除其中一个“我不想按媒体大小或形状检测移动浏览器”。我想使用

navigator.userAgent.match

来完成它。“这完全是你的选择，但我会注意到，使用

userAgent

进行此操作通常被认为是一种反模式。我认为html也需要在引号中看到它。我现在知道，没有必要指定javascript。谢谢。至于我选择的反模式方法，我觉得手机的分辨率越来越高，所以这种方法非常理想，可以避免在大屏幕上使用错误的css。非常复古的浏览器嗅探…谢谢。1）我现在明白了，我不需要重复引用。我曾假设javascript会在不加引号的情况下转储变量，html也会需要它们，因此我最终加倍了。2）我最终只是将脚本移动到链接id=“insertStyle”之后。现在一切似乎都很好。谢谢您的帮助。@Panopticon36：是的，要记住的主要一点是，当您处理DOM时，您处理的是对象和属性，而不是HTML字符串。。。

function detectMobile() {
    var text = "";
    if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Playstation/i) || navigator.userAgent.match(/mobile/i)) {
        text = "mobile.css";
    } else {
        text = "screen.css";
    }
    document.getElementById('insertStyle').href=text
}