PCとスマホで呼び出すCSS切り替え
最近はSassが楽なのでメディアクエリでやっちゃってますけど、
CSSごと読み替えしちゃいたいとき用に
linkで切り替え
この場合は閲覧環境のブラウザの横幅で切り替え
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="sp.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="pc.css">
横幅じゃなくてデバイスの種類で切り替えるJS
<script>
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.write('<link rel="stylesheet" type="text/css" href="sp.css">');
} else {
document.write('<link rel="stylesheet" type="text/css" href="pc.css">');
}
</script>
スマホはスマホ!PCはPC!て感じにガッチリめに切り替えしたいなら
後者のJSの方がおすすめ。
この記事が気に入ったらサポートをしてみませんか?