JQuery中屏幕大小的@media测试相当于什么答案

【问题标题】：What is the equivalent of @media test for screen size in JQueryJQuery中屏幕大小的@media测试相当于什么
【发布时间】：2013-07-10 17:46:52
【问题描述】：

我目前正在使用@media 设置一些 CSS 样式，但现在我需要在 JQuery 中对屏幕大小进行等效检查。

@media ( min-width: 33em ) {

}

这个想法是当屏幕尺寸大于 33em 时隐藏一个按钮，当屏幕尺寸小于 33em 时显示它。

这是按钮：

<asp:Button runat="server" ID="btnSelectAll" CssClass="btnSelectAll" data-theme="b"
                Text="Select All" OnClick="btnSelectAll_Click" />

【问题讨论】：

标签： jquery css jquery-mobile screen-size

【解决方案1】：

工作jsFiddle示例：http://jsfiddle.net/A5Hk5/2/

您要做的就是在窗口调整大小事件中检查屏幕宽度，如果宽度低于某个值（在我的示例中为 640 像素），然后将其显示设置为无，否则它是块状或可见的。

此解决方案使用 em 到 px 转换，方法可以在下面找到。取自 HERE 的转换函数。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){ 
    $(window).resize();
});

$(window).resize(function() {
    $(".ui-btn").css({display: window.innerWidth >= $(33).toPx() ? "block" : "none"});
});

$.fn.toEm = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseInt(this[0],10),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return (that / scopeVal).toFixed(8);
};


$.fn.toPx = function(settings){
    settings = jQuery.extend({
        scope: 'body'
    }, settings);
    var that = parseFloat(this[0]),
        scopeTest = jQuery('<div style="display: none; font-size: 1em; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo(settings.scope),
        scopeVal = scopeTest.height();
    scopeTest.remove();
    return Math.round(that * scopeVal);
};

【讨论】：

谢谢，我选择你的答案，因为它是最全面的。

【解决方案2】：

最简单的方法是使用一个库（例如Enquire.js），使您能够进行媒体查询。这使您可以像使用 CSS 一样在 JavaScript 中使用媒体查询。

当然，如果你只想在宽度低于 33em 时显示按钮，在高于 33em 时隐藏按钮，不管@media 或任何其他查询，只需测试屏幕宽度即可：

// convert window width from pixel to em, as em is relative to size of font
var widthEms = $(window).width() / parseFloat($('body').css('font-size'));

// test for em width
if (widthEms < 33) {
    $('#btnSelectAll').show();
} else {
    $('#btnSelectAll').hide();
}

_{（像素到 em 转换的功劳：Is it possible to get the width of the window in em units using javascript?）}

【讨论】：

$(window).width 将给出 33px 而不是 33em。

【解决方案3】：

jQuery 可以为您提供视口的可用宽度为$(window).innerWidth()。

您还需要使用 $(window).resize( yourRedrawFunction ) 检查窗口大小调整

还要注意像素/em 转换。 width 属性将是像素大小，并且您已要求 em。这很难计算，所以我建议尽可能避免这种复杂性。

工作示例：

function redrawButton(){
    var pxPerEm = 13, // <- have fun with this
        pxWidth = $(window).innerWidth(),
        emWidth = Math.round( pxWidth / pxPerEm );
    $('#btnSelectAll')[ width < emWidth ? 'hide' : 'show' ]();
    return true;
}
redrawButton();
$(window).resize( redrawButton );

可以通过解析根 font-size 来计算 em 大小，但必须存在该 css 属性才能使其工作。您可能希望退回到您知道对您的网站正确的东西，例如我的示例中的 13px。

var pxPerEm = /^(\d+)px$/.exec($(document.body).css('font-size')) ? Number(RegExp.$1) : 13;

【讨论】：

10px per em 似乎相当随意。
在我的示例代码中是任意的。它可能会被Number($(document.body).css('font-size')) 抓取，但我没有足够的信心添加它是否可靠

【解决方案4】：

试试这个：

if(screen.width > 1000)
{
 ...
}

用 em 试试，不确定是否可行。

【讨论】：

.width 返回 px 而不是 em，我仍然受益于你的回答是一种方式，所以谢谢

【解决方案5】：

我建议你使用 then:

$(window).on('load', function () {
    var screenSize = { //you could wish to set this variable as global
        width: $(this).width(),
        height: $(this).height()
    };
});

如果你是一个“有意识”的开发者并且总是设置图像的宽度和高度属性并且不使用一些异步脚本来重新渲染 DOM，那么最好使用 DOM 就绪处理程序：

$(function(){...}); //use $(window) inside handler

那么，屏幕宽度可以使用：screenSize.width

【讨论】：