css - Surface 和 CSS 媒体查询

Question

我们正在将网站转换为响应式网站，无论我们做什么，我们都无法让媒体查询在 Microsoft Surface 上运行，我们尝试了以下方法

@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; }

但是此代码将针对所有“视网膜”类型的屏幕，包括表面。来源。

@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! */

}