Bug 1541418 - use pointer:fine vs coarse/none to decide whether to show the mobile or desktop UX for about:copmat, rather than min-width media queries; r=denschub

use pointer:fine vs coarse/none to decide whether to show the mobile or desktop UX for about:compat, rather than min-width media queries

Differential Revision: https://phabricator.services.mozilla.com/D27940

--HG--
extra : moz-landing-system : lando

browser/extensions/webcompat/aboutCompat.css

@@ -1,4 +1,4 @@
-@media screen and (min-device-width:481px) {
+@media (any-pointer: fine) {
   :root {
     font-family: sans-serif;
     margin: 40px auto;
@@ -78,7 +78,7 @@
   }
 }
 
-@media screen and (min-device-width:320px) and (max-device-width:480px) {
+@media (any-pointer: coarse), (any-pointer: none) {
   * {
     margin: 0;
     padding: 0;

mobile/android/extensions/webcompat/aboutCompat.css

@@ -1,4 +1,4 @@
-@media screen and (min-device-width:481px) {
+@media (any-pointer: fine) {
   :root {
     font-family: sans-serif;
     margin: 40px auto;
@@ -78,7 +78,7 @@
   }
 }
 
-@media screen and (min-device-width:320px) and (max-device-width:480px) {
+@media (any-pointer: coarse), (any-pointer: none) {
   * {
     margin: 0;
     padding: 0;