Search code examples
cssmedia-queries

Surface and css media queries

We are in the process of converting a site to responsive and no matter what we do we cannot get the media queries to work on Microsoft surface we have tried the following

@media screen and (orientation: portrait) {
 @-ms-viewport {
 width: 768px;
 height: 1024px;
  }

And it doesn't work has anything changed since 8.1 has been released to stop this working. Why Microsoft have to make us jump through leap holes. Even ipad accepts standard media queries why does surface have to be different and cause a headache.

Solution

  • I think what your trying to do is

    @-ms-viewport { width: device-width; }

    But this code will target all "retina" type screens including the surface. Source.

    @media (min--moz-device-pixel-ratio: 1.5),
       (-o-min-device-pixel-ratio: 3/2),
       (-webkit-min-device-pixel-ratio: 1.5),
       (min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi),
       (min-resolution: 1.5dppx) {

/* Retina rules! */

}