如何顯示正在使用哪個媒體查詢

是否有可能以某種方式顯示在使用Razor視圖引擎，JQuery和JQuery-Mobile的ASP.NET MVC 4移動網站中正在使用哪個媒體查詢？如果是，那麼如何？我知道我可以在桌面上使用Chrome瀏覽器，通過調整窗口大小並檢查受影響的元素來查看哪一個正在使用，但我希望能夠在頁面上顯示它，以便確定哪一個正在查看在手機上使用。這似乎是不同的媒體查詢用於肖像單一電話....我的意思是，它會看起來像一種方式，然後我從縱向更改爲風景再次肖像，然後肖像視圖看起來像它使用不同的媒體查詢比以前。如何顯示正在使用哪個媒體查詢

解決方案：

我把這個在我的頁面佈局的底部（它適用於iPhone，但不是舊的機器人像2.1出於某種原因）：

@if (true) 
    { 
     //Change this to false for production 

     <text> 
     <div id="version" data-role="footer" data-position="fixed"></div> 
     <script type="text/javascript"> 
      function setFooterText(){ 
       $('#version').text('Media Selector: ' + $('#version').css('content')); 
      } 
      $(window).bind('resize', function (event) { 
       setFooterText(); 
      }).bind('orientationchange', function (event) { 
       setFooterText(); 
      }); 
      $(function() { 
       setFooterText(); 
      }); 
     </script> 
     </text> 
    }

，然後在CSS：

@media all and (max-width: 320px) { 
    #version { content:"320px"; } 
} 
@media all and (max-width: 240px) { 
    #version { content:"240px";} 
} 
etc...

編輯：

了Android 2.1的瀏覽器不支持自定義CSS prope rties。我認爲這主要是一個HTML 5的東西。

來源

2012-12-05 Soenhay

這是一個非常廣泛的探測問題。你是否想要做一些像「Inspect Element」一樣的東西，並且看到這個元素的id/class？或者是其他東西？ – chris

這些被稱爲媒體查詢，而不是選擇器。 – BoltClock

哎呀..謝謝。 – Soenhay

您可以做的是爲每個選擇器創建一個虛擬類和元素，然後使用JavaScript檢查其值並檢查其值。

例如：

<div id="version"></div> 

#version { 
    content:"300wide"; 
    display:none; 
} 


alert($('#version').css('content'))

來源

2012-12-05 19:24:02

看起來像它會工作...我會嘗試並找回你 – Soenhay

這對我有效..我會在問題中發佈我的解決方案。謝謝！ – Soenhay

好聽。請選擇答案。 –

如何顯示正在使用哪個媒體查詢

回答

相關問題