デバイスごとにcss・jsを変える
import.jsを作り、その中にcssやjsをまとめて書く。
userAgentを使って振り分ける。
html
<!--タブレットのときはPCを出す-->
<script>
$(function() {
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
// スマホのとき
$('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1">');
}else{
// PC・タブレットのとき
$('head').prepend('<meta name="viewport" content="980px">');
} });
</script>
<!--タブレットのときはPCを出す-->
<!--import.js内でjsとcssを一括で読ませる-->
<script type="text/javascript" src="js/import.js"></script>
<!--import.js内でjsとcssを一括で読ませる-->import.js
//jsの処理
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
//スマホのjs処理
document.write('<script type="text/javascript" src="js/phone.js"></script>');
} else {
//PC,タブレットのjs処理
document.write('<script type="text/javascript" src="js/pc.js">
</script>');
}
//cssの処理
if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
//スマホのcss処理
document.write('<link rel="stylesheet" href="css/phone.css">');
}else {
//PC,タブレットのcss処理
document.write(' <link type="text/css" rel="stylesheet" href="css/pc.css" >'); }
