Question

我目前正在使用@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" />

Answer 1

使用 jsFiddle 示例：http://jsfiddle.net/A5Hk5/2/

你要做的就是检查窗口调整大小事件的屏幕宽度，如果宽度低于某个值（如果我的例子是640px），则将其显示设置为none，否则它是块或可见。

此解决方案使用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);
};

Answer 2

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

当然，如果您只想在宽度低于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();
}

_{（对于像素到对象转换的信用：Is it possible to get the width of the window in em units using javascript?）}

Answer 3

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

您还需要使用$(window).resize( yourRedrawFunction )

检查窗口大小调整

还要注意像素/ 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 );

计算em大小可以通过解析根font-size来完成，但是必须存在css属性才能使其工作。您可能希望回归到您认为适合您网站的内容，例如我的示例中的13px。

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

Answer 4

试试这个：

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

尝试不确定它是否可行。

Answer 5

我建议您使用：

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

如果您是'知道'开发者并且始终设置图像宽度和放大器height属性并且不使用某些异步脚本来重新呈现DOM，更好的方法是使用DOM就绪处理程序：

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

然后，可以使用：screenSize.width

访问屏幕宽度

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

5 个答案: