Question

我们正在将网站转换为响应式，无论我们做什么，我们无法让媒体查询在Microsoft表面上工作我们已经尝试过以下

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

自从8.1发布以阻止此工作后，它无法正常工作。为什么微软必须让我们跳过漏洞。即使是ipad接受标准媒体查询，为什么表面必须不同并引起头痛。

Answer 1

@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) and 
       (min-width: 1500px) and (max-width : 2000px) and
       @-ms-viewport {
{
 /** Surface Pro styles here **/
}

适用于Win10 Edge / IE11

Answer 2

我认为你要做的是

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

但是这段代码将针对所有“视网膜”类型的屏幕，包括表面。 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! */

}

Surface和css媒体查询

2 个答案: