1024px - css screen ratio



媒體查詢以檢測設備是否為觸摸屏 (6)

使用JS或jQuery將類觸摸屏添加到身體

  //allowing mobile only css
    var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
    if(isMobile){
        jQuery("body").attr("class",'touchscreen');
    }

https://ffff65535.com

在不使用觸摸屏設備時,使用媒體查詢最安全的方法是什麼? 如果沒有辦法,您是否建議使用JavaScript解決方案,例如!window.Touch或Modernizr?


在2017年,來自第二個答案的CSS媒體查詢仍然無法在Firefox上使用。 我找到了一個解決方案: -moz-touch-enabled

所以,這裡是跨瀏覽器媒體查詢:

@media (-moz-touch-enabled: 1), (pointer:coarse) {
    .something {
        its: working;
    }
}

媒體類型不允許您檢測作為標準一部分的觸摸功能:

http://www.w3.org/TR/css3-mediaqueries/

因此,沒有辦法通過CSS或媒體查詢一致地執行它,您將不得不訴諸於JavaScript。

不需要使用Modernizr,你可以使用普通的JavaScript:

<script type="text/javascript">
    var is_touch_device = 'ontouchstart' in document.documentElement;
    if(is_touch_device) alert("touch is enabled!");
</script>

實際上有一個媒體查詢:

@media (hover: none) { … }

除了Firefox之外,它的支持相當好 。 Safari和Chrome是移動設備上最常見的瀏覽器,它可能足以應用於更廣泛的應用。


截至2013年年中,CSS解決方案似乎並不普及。 代替...

  1. Nick Zakas解釋說 ,當瀏覽器不支持觸摸時,Modernizr會應用no-touch CSS類。

  2. 或者使用一段簡單的代碼在JavaScript中檢測,從而允許您實現自己的Modernizr樣解決方案:

    <script>
        document.documentElement.className += 
        (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
    </script>
    

    然後你可以寫你的CSS為:

    .no-touch .myClass {
        ...
    }
    .touch .myClass {
        ...
    }
    

此解決方案將一直運行,直到所有瀏覽器全面支持CSS4。 當那一天到來時只需使用CSS4。 但在此之前,這適用於當前的瀏覽器。

瀏覽器util.js中

export const isMobile = {
  android: () => navigator.userAgent.match(/Android/i),
  blackberry: () => navigator.userAgent.match(/BlackBerry/i),
  ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
  opera: () => navigator.userAgent.match(/Opera Mini/i),
  windows: () => navigator.userAgent.match(/IEMobile/i),
  any: () => (isMobile.android() || isMobile.blackberry() || 
  isMobile.ios() || isMobile.opera() || isMobile.windows())
};

負載:

老方法:

isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;

較新的方式:

isMobile.any() ? document.body.classList.add('is-touch') : null;

如果設備具有觸摸屏,上面的代碼會將“is-touch”類添加到body標籤。 現在,您的Web應用程序中您將擁有CSS的任何位置:懸停您可以調用body:not(.is-touch) the_rest_of_my_css:hover

例如:

button:hover

變為:

body:not(.is-touch) button:hover

這個解決方案避免使用modernizer,因為modernizer lib是一個非常大的庫。 如果你所要做的只是檢測觸摸屏,當最終編譯源的大小是需求時,這將是最好的。





media-queries