Question

我正在制作我的第一个响应式网站。正如您所知道的“首先移动”。刚刚开始 320px 宽度版本。

您可以使用 初学者 代码帮助我，了解如何检查标题 onload 的宽度，而无需先手动调整大小。

这是我到目前为止，它的工作原理......但只有在手动调整大小之后。需要立即开始工作。

<script>

$(document).ready(function() {
    $(window).resize(function(){   
        if ($("header").width() <= 320 ){
            $(".link").on("mousedown", function() {
                $("header").animate({"top":"-15%"});
                $("nav").animate({"bottom":"-93%"});
                $("#return").css("display","inline-block");
            });
            $("#return").on("mousedown", function() {
                $("#return").css("display","none");
                $("header").animate({"top":"0%"});
                $("nav").animate({"bottom":"-15%"});
            });
        }
    });
});

</script>

Answer 1

您可以使用

$("header").innerWidth(); or $("header")..outerWidth();

在加载后处理代码，使用它。

$( window ).bind( 'load', function(){
    // codes
});

如果问题出现在滚动（向上/向下）功能上，请使用此功能。

if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
    $(this).bind('DOMMouseScroll', function (e) {
        if (e.originalEvent.detail > 0) {
            // codes
        }
    });
} else {
    $(this).bind('mousewheel', function (e) {
        if (e.originalEvent.wheelDelta / 120 < 1) {
               // codes            }
    });
}

在重新调整大小功能时使用此..

$(window).resize(function(){   
    if (window.innerWidth < 321 ){
       // codes to be done in 320 below
    }else{
       // codes to be done in 320 above 
    }
});

Answer 2

解决方案：

在头部添加jQuery mobile。

并在其上方添加此脚本，以禁用“加载”＃39;网页底部的文字。

<script>$(document).on("mobileinit", function(){$.mobile.loadingMessage =false;});</script>

<script src="jq_lib/jquery.mobile-1.3.2.min.js"></script>

在＆＃39; orientationchange＆＃39;上添加浏览器刷新你的jQuery代码。
```
$( window ).on( "orientationchange", function() {
    location.reload();
});
```

没有第1步和第1步的完整代码2。

$(document).ready(function() {

        var ref = $("header").width();

        //refresh bij orientatie verandering.
        $( window ).on( "orientationchange", function() {
            location.reload();
        });

        //320x480 portrait
        if (ref <= 320 ){
            $(".link").on("mousedown", function() {
                $("header").animate({"top":"-15%"});
                $("nav").animate({"bottom":"-93%"});
                $("#return").css("display","inline-block");
            });
            $("#return").on("mousedown", function() {
                $("#return").css("display","none");
                $("header").animate({"top":"0%"});
                $("nav").animate({"bottom":"-15%"});
            });
        }

        //320x480 landscape
        if (ref >=321 && ref <= 480 ){
            $(".link").on("mousedown", function() {
                $("header").animate({"top":"-21%"});
                $("nav").animate({"bottom":"-90%"});
                $("#return").css("display","inline-block");
            });
            $("#return").on("mousedown", function() {
                $("#return").css("display","none");
                $("header").animate({"top":"0%"});
                $("nav").animate({"bottom":"-25%"});
            });
        }
});

JQuery检查＆＃39;标题＆＃39;宽度上载

2 个答案: