Javascript内のスタイルを可変させたい

Question

###前提・実現したいこと
javascript内のスタイルをデバイスごとに変更

var $width =640; // 横幅
var $height =300; // 高さ
この部分をPC/タブレット/スマホ それぞれに可変させたい

実装するページのCSSはメディアクエリにて可変させてますが、
同じようにJavascript内も可変したいと思っています。

###該当のソースコード

$(function(){
// 設定
var $width =640; // 横幅
var $height =300; // 高さ
var $interval = 3000; // 切り替わりの間隔（ミリ秒）
var $fade_speed = 1000; // フェード処理の早さ（ミリ秒）
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});

###補足情報(言語/FW/ツール等のバージョンなど)
javascriptはこちらからお借りしました。
http://on-ze.com/archives/1388

Answer 1

JavaScript も window.matchMedia を使ってメディアクエリで対応とか。

【[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法 ｜ memocarilog】
https://memocarilog.info/jquery/6500

Comments

[chazukeo]

回答ありがとうございました。

Answer 2

ユーザーエージェント(navigator.userAgent)から判断するか
window.innerWidth(or outerWidth)から判断するとよいでしょう

Comments

[chazukeo]

回答ありがとうございました