Question

这是对此问题的后续问题：Get the device width in javascript。

我尝试做的是在JavaScript中获得@media (max-width: 600px)的等效css。

accepted answer说要执行以下操作：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

这还是正确的吗？它适用于所有设备吗？

如果它是正确的，检查(window.innerWidth > 0)的重点是什么？

我想知道它是否仍然有效。如果你看一下答案的最后评论（有6个赞成票），它会说：

这有多少赞成？ var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;在iphone 6和6上返回667 加。此解决方案无法正常工作。

Answer 1

你应该可以这样做：

if (matchMedia) {
  var mq = window.matchMedia("(max-width: 600px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

function WidthChange(mq) {
  if (mq.matches) { 
     //Window width is less than or equal to 600px
  } else { 
     //Window width is greater than 600px
  }
}

Answer 2

从您的问题看来，您似乎要求以下（这是一个微不足道的答案，但我认为这就是您所要求的）：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

相当于：

var width;
if (window.innerWidth > 0)
{
    width = window.innerWidth;
}
else
{
    width = screen.width;
}

或：

var width = screen.width;
if (window.innerWidth > 0)
{
    width = window.innerWidth;
}

他们都做同样的事情......

从下面的评论中你可能想要以下jsFiddle：
（显示“window.innerWidth”是你想要的（包含元素的大小） - 但有些浏览器不支持它 - 所以“screen.width”变成了可能不正确的后备，因为它是整体的宽度窗口，而不仅仅是包含元素）

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
$('#divOutput').html('The width is:' + width + 'px <br>' +
                     'window.innerWidth = ' + window.innerWidth + 'px & <br>' +
                     'screen.width = ' + screen.width + 'px');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divOutput"></div>

如果这没有帮助，请查看：
window.innerWidth can't work on IE7. How to fix via JS and jQuery?

得到css相当于＆＃34; max-width：600px＆＃34;使用JavaScript

2 个答案: