針對平板電腦而不使用媒體查詢

我只是想知道是否可以針對平板電腦而不使用媒體查詢。我問這個問題的原因是我已經在使用媒體查詢，但是我有桌面上的灰度圖像，當它們被徘徊時，它們會變成原來的顏色。當設備達到一定尺寸時，我已經刪除了灰度，因此在較小的平板電腦和手機上可以正常使用，但對於ipad和某些平板電腦進行園景設計時，它略微小一點。針對平板電腦而不使用媒體查詢

有沒有什麼辦法可以讓平板電腦在不接觸媒體查詢的情況下關閉過濾器？

在此先感謝

有問題的網站是www.garethjweaver.com

來源

2014-03-04 Gareth

看一看移動ESP框架;特別是JavaScript的。它可以檢測單個設備或平板電腦等設備組。

http://blog.mobileesp.com/

的方法最屬於你想達到什麼是：

MobileEsp.DetectTierTablet();

它還允許您通過操作系統選擇平板電腦的特定羣體：

MobileEsp.DetectAndroidTablet(); 
MobileEsp.DetectWebOSTablet(); 
MobileEsp.DetectIpad(); 
MobileEsp.DetectMaemoTablet(); 
MobileEsp.DetectBlackBerryTablet(); 
MobileEsp.DetectOperaAndroidTablet();

一種可能使用場景：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://www.hand-interactive.com/js/mdetect.js"></script> 
<script> 
    $(function() { 

     if(MobileEsp.DetectTierTablet()) { // if its a tablet this will be true 

      $("html").addClass("isTablet"); // this will add the isTablet class to the HTML element 

     }  
    }); 
<script>

上面的示例使用jQuery，如果您開始使用JavaScript，這將使您更輕鬆。隨着在地方，你只需要爲您的平板電腦的規則在樣式表是這樣的：

<style> 
    body { 
     max-width: 1200px; 
    } 
    .isTablet body { 
     max-width: 100%; 
    } 
</style>

它也有其他版本的ASP.NET和PHP所以你可以做檢測服務器端。

這裏的說明功能的小提琴上面列出：

Fiddle

來源

2014-03-04 07:41:38

確定感謝我就給你看看，我是一個完整的新手，當涉及到的JavaScript，雖然，所以我將很可能很快就問這個問題了 – Gareth

有您可以複製和粘貼網站上的大量使用場景。基本上你可以做的就是將一個CSS類設置到「isTablet」頁面的HTML元素上，然後將該類的任何特定於平板電腦的樣式作爲前綴。 –

因此，例如，而不是.isTablet body {max-width：100％;}它可以是.isTablet.grayscale {filter：none;}。這會起作用嗎？ – Gareth

我讓你不想碰媒體查詢，但據我可以看到它的感覺就像你的問題可以通過 @media (orientation: landscape) { ... }

你想確定它是否是一個風景視圖..好嗎？

有關媒體查詢MDN:media query

的其他用途，如果你真的不想去觸摸它，還有另一種選擇是使用JavaScript。但我認爲這會讓事情變得更加複雜。

希望我的回答可以幫助.. :)

來源

2014-03-04 09:34:01 chengmu

針對平板電腦而不使用媒體查詢

回答

相關問題