對於所有平板電腦（包括「Pro」版本）的媒體查詢，沒有筆記本電腦

Question

我想在設備是平板電腦（包括Apple iPad Pro（1366像素寬）和Microsoft Surface Pro 3（1440像素寬））時應用某些CSS樣式，但而不是當設備是筆記本電腦時（1024px減去滾動條或更大）。當我使用此代碼時：

@media (min-width: 768px) and (max-width: 991px) and (max-width: 1440px) { 
    /* 
     non-smartphone touchscreen optimized styles here 
     large buttons, menus with everything visible without :hover etc. 
    */ 
} 

大平板電腦上的所有樣式（992px-1440px）都不正確。我在媒體查詢中嘗試了許多不同的和/或最小值/最大值的組合，至少在一臺設備上渲染總是錯誤的。我怎麼解決這個問題？

Answer 1

由於平板電腦分辨率與很多非觸控設備重疊，因此僅取決於分辨率就無法正常工作。 您將需要依賴用戶代理字符串或依靠功能檢測。

您可以嘗試modernizr或device.js

他們都添加類到您的根元素，這樣定義的各種設備類型的CSS變得微不足道。 device.js現在沒有得到更新，但更容易上手。