我目前正在使用此脚本根据屏幕宽度加载正确的 CSS。它工作正常。但是，当我尝试通过查询宽度和高度来加载正确的脚本时遇到问题。脚本如下。有人可以纠正我哪里出错了吗？
提前致谢。
function adjustStyle(width) {
width = parseInt(width);
height = $(window).height();
if (width < 1010) {
$("#size-stylesheet").attr("href", "css/style_1024.css");
} else if ((width < 1281) && (height > 780)) {
$("#size-stylesheet").attr("href", "css/style_1280.css");
} else if ((width < 1281) && (height < 800)) {
$("#size-stylesheet").attr("href", "css/style_1280mac.css");
} else if (width < 1370) {
$("#size-stylesheet").attr("href", "css/style_1366.css");
} else if (width < 1450) {
$("#size-stylesheet").attr("href", "css/style_mac1.css");
} else if (width < 1610) {
$("#size-stylesheet").attr("href", "css/style_1600.css");
} else {
$("#size-stylesheet").attr("href", "css/style_FHD.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});
最佳答案
照此办理。下面给出的代码正在运行....
<!DOCTYPE html>
<html>
<head>
<title>question1</title>
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="style3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(window).ready(function(){
if($(window).width()<1281 && $(window).height()>780)
{
$("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
$("#size-stylesheet").attr("href","style2.css");
}
else
{
$("#size-stylesheet").attr("href","style3.css");
}
});
$( window ).resize(function() {
if($(window).width()<1281 && $(window).height()>780)
{
$("#size-stylesheet").attr("href","style1.css");
}
else if($(window).width()<1281 && $(window).height()<800)
{
$("#size-stylesheet").attr("href","style2.css");
}
else
{
$("#size-stylesheet").attr("href","style3.css");
}
});
</script>
<body>
<div>
this is a webpage
</div>
</body>
</head>
</html>
关于javascript - 通过查询浏览器的宽度和高度，使用 jquery 加载选择性 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34883071/