不同屏幕尺寸上的 Javascript答案

【问题标题】：Javascript on different screen sizes不同屏幕尺寸上的 Javascript
【发布时间】：2015-08-07 18:25:34
【问题描述】：

我需要让这个脚本在宽度为 794 像素或更高的屏幕上运行。对于较小的屏幕尺寸，它不应该运行，因为这会导致另一个脚本出现问题。

我尝试了不同的东西，但我真的不知道如何做到这一点。

jQuery(document).ready(function ($) {
    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

谁能告诉我，我如何调整它以让这个脚本在屏幕宽度 794 像素或更高的屏幕上运行？

最好的问候萨法克

【问题讨论】：

标签： javascript jquery scroll width screen

【解决方案1】：

您可以在 javascript 中使用window.matchMedia() 进行媒体查询。

例如

var mq = window.matchMedia( "(max-width: 570px)" );
if (mq.matches) {
    // window width is at less than 570px
}
else {
    // window width is greater than 570px
}

网页浏览器支持：请参考 "https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/"

更新

如果您只想运行一次脚本而不是调整大小，您可以使用

if($(window).width()>=794)
{
    //do your stuffs here
}

【讨论】：

很好的解决方案。但请注意，这只适用于 IE 10 及更高版本，不适用于 IE 移动版。这是一个支持更多浏览器的好 polyfill：github.com/paulirish/matchMedia.js
谢谢。但是有一个问题。当我以 1024 像素宽度打开此页面并更改窗口大小而不重新加载时，我的脚本仍在运行。 ://
是的，因为您正在调整窗口大小。您只想运行一次脚本而不是调整大小？？
当页面的访问者调整浏览器大小时，有没有办法检查窗口的大小？因为它应该只在 794 像素或更高的宽度上运行 - 而不是在较小的尺寸上运行。当访问者调整页面大小而不重新加载时也是如此。
是的，它只会在大于您指定宽度的宽度上运行，但每次用户调整窗口大小时！请详细说明。

【解决方案2】：

您可以使用window.width()

例如：

if(!$(window).width()<794)
{
    //do your stuffs here
}

【讨论】：

【解决方案3】：

使用$(window).width()

if($(window).width() >= yourScreenSize)
{
   // your code goes here
}

【讨论】：

【解决方案4】：

非 jQuery 解决方案看起来像这样

if (window.innerWidth > 794) {
   myFunc(); //the code that you want to run on bigger screens
}

【讨论】：

【解决方案5】：

使用 jQuery：

$(function(){
    $( window ).resize(function(){
        if( $( window ).width() >= 794 ){
            // Your code here
        }
    });   
    $( window ).resize();    // Trigger window resize to check on load
});

【讨论】：

【解决方案6】：

jQuery(document).ready(function ($) {
$('a[href*=#]:not([href=#])').click(function () {
    if( $(window).width() >= 794 )
    {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
    }//window size check ends here
});

});

【讨论】：

当访问者调整窗口大小时这是否也有效？因此，如果他们加载宽度为 1024 的页面，然后将其调整为小于 794，脚本会停止运行？
是的，它应该可以工作。因为这段代码总是在每次点击事件发生时再次检查当前屏幕的宽度，通过在 if 条件中调用 $(window).width()