サーバ向けのCSSをモバイル向けに使用する場合

モバイルブラウザ用に特定のCSSを提供する必要があります。私はメディアのサイズや形状によってモバイルブラウザーを検出したくありません。私はnavigator.userAgent.matchを使ってやりたいと思います。サーバ向けのCSSをモバイル向けに使用する場合

ここでは私が作業しているコードのスニペットですが、うまく動作していないようです。ここでの目的は、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>

Currenlyコードはまったく動作せず、スタイルシートのhrefを "null"として残します。私のコードをどのようにパッチすることができるかについての指針は、非常に高く評価されます。

出典

2017-01-24 Panopticon36

なぜあなたは 'と'も持っていますか？そのうちの1つを削除してみてください – Miguel

* "メディアのサイズや形状によってモバイルブラウザーを検出したくありません。 *これはあなたの選択ですが、これに 'userAgent'を使うのは一般的にアンチパターンとみなされます。 –

私はそれがhtmlにする必要があると思っていました。 – Panopticon36

2つのこと：

"'mobile.css'"と"'screen.css'"で'を削除します。 すでにのテキストを引用符で囲んでいるので、2回繰り返す必要はありません。
JavaScriptで要素を追加しましたか？現在、コードが実行されるとき、その要素は存在しないので、nullをgetElementByIdから取得します。

だから、の線に沿って何か：

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);

出典

2017-01-24 14:36:30

ありがとうございます。 1）二重引用符を付ける必要がないことがわかりました。私はjavascriptが引用符なしで変数をダンプすると仮定し、HTMLもそれらを必要とするので、私は倍増した。 2）リンクID = "insertStyle"の後にスクリプトを動かすだけでした。今はすべてが良いようです。ご協力いただきありがとうございます。 – Panopticon36

@ Panopticon36：覚えておくべき主なことは、DOMを扱うとき、HTML文字列ではなく、オブジェクトやプロパティを扱っていることです。 –

私はT.J。このおかげのようなルックスを使用して終了コードクラウダーと私の質問のコメントに感謝します。私は、ブラウザのスニッフィングとオリエンテーション、最大幅を使って、スタイルがほぼすべての条件下で適切に切り替わるようにしました。

<!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>

そしてdetectMobile.js

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 
}

という名前の別のファイルにみんなありがとう。

出典

2017-01-25 19:53:12 Panopticon36

サーバ向けのCSSをモバイル向けに使用する場合

答えて

関連する問題