@media測試在JQuery中的屏幕大小相當於什麼

我目前使用@media來設置一些CSS樣式，但現在我需要在JQuery中進行屏幕大小的等效檢查。@media測試在JQuery中的屏幕大小相當於什麼

@media (min-width: 33em) { 

}

這個想法是當屏幕尺寸大於33em時隱藏按鈕，當屏幕尺寸小於33em時顯示它。

下面是按鈕：

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

來源

2013-07-10 Anton Belev

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

你想要做的一切都是在窗口檢查屏幕寬度調整情況下，如果寬度是低那麼一些值（如果關我的例子是爲640px），那麼將其顯示設置爲無，否則爲阻擋或可見。

這個解決方案使用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); 
};

來源

2013-07-10 08:44:19 Gajotres

謝謝，我選擇你的答案，因爲這是最全面的。 –

試試這個：

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

嘗試用EM不能肯定是否會奏效。

來源

2013-07-10 08:39:19

.WIDTH不是EM返回像素，還是讓我受益匪淺，從你的答案是一種方式，所以感謝 –

最簡單的方法是使用一個庫（例如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(); 
}

_{（信貸的像素到EM轉換：Is it possible to get the width of the window in em units using javascript?）}

來源

2013-07-10 08:39:24

$（窗口）.WIDTH會給33px不33em。 – Tim

非常好的一點...哎呀！固定。謝謝。 –

我建議你使用，則：

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

如果你是一個「知道」 developper始終爲圖像寬度& height屬性，並且不使用一些異步腳本來重新呈現DOM設置，更好的方式是使用DOM就緒處理程序：

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

那麼，屏幕寬度可以通過以下方式訪問：screenSize.width

來源

2013-07-10 08:39:44

jQuery可以爲您提供視口的可用寬度，作爲$(window).innerWidth()。

您還需要檢查窗口$(window).resize(yourRedrawFunction)

調整同時還要注意像素/ EM轉換。寬度屬性將是像素大小，並且您要求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;

來源

2013-07-10 08:39:52 Tim

每個10px看起來相當隨意。 –

它在我的示例代碼中是任意的。它可能會被'Number（$（document.body）.css（'font-size'））''抓住，但我沒有足夠的信心，它是可靠的添加它 – Tim

@media測試在JQuery中的屏幕大小相當於什麼

回答

相關問題