通过查询浏览器的宽度和高度使用jquery加载选择性CSS

Question

我目前正在使用此脚本根据屏幕宽度加载正确的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());
    });
});

Answer 1

您要将width参数传递给函数，而不是height传递给函数，因此会出现此问题。

我已经编辑了代码，希望它能工作！！

function adjustStyle(width, height) {
    width = parseInt(width);
    height = parseInt(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(), $(this).height());
    $(window).resize(function() {
        adjustStyle($(this).width(), $(this).height());
    });
});

Answer 2

这样做。 下面给出的代码正在工作....

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

通过查询浏览器的宽度和高度使用jquery加载选择性CSS

问题描述

2 个解决方案

解决方案1
0 2016-01-19 17:44:43

解决方案2
0 2016-01-19 19:01:23

通过查询浏览器的宽度和高度使用jquery加载选择性CSS

问题描述

2 个解决方案

解决方案1 0 2016-01-19 17:44:43

解决方案2 0 2016-01-19 19:01:23

解决方案1
0 2016-01-19 17:44:43

解决方案2
0 2016-01-19 19:01:23