媒体查询被忽略 - safari / opera

Question

我遇到的问题是我认为是我的媒体查询。它们被Safari和Opera忽略了，但是在Chome和firefox上工作。这导致页面在chrome和firefox上与opera和safari相比看起来不同。

我确保包含元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

我的查询如下：

@media screen and (-webkit-min-device-pixel-ratio: 1), and (max-width:1170px) {}

我非常困惑，因为这是直接的HTML / CSS。此时没有涉及JS等。我添加了一个包含以下项目的codepen的链接：http://codepen.io/cgraffeo/pen/ryGzXG

在歌剧和野生动物园中会发生这种情况，因为你可以看到它推动了整个地方：