@media 查询不会在横向模式下触发 iPhone 6 plus

Question

我一直在根据关于 standard media queries for iPhone 6 models 的一个非常流行的答案使用以下查询，但是，横向模式没有被选中。更令人费解的是，为纵向媒体查询编写的css在横向模式下仍然有效。

@media only screen 
  and (min-device-width : 414px) 
  and (max-device-width : 736px) 
  and (orientation : landscape) 
  and (-webkit-min-device-pixel-ratio : 3) 
{ }

@media only screen 
  and (min-device-width : 414px) 
  and (max-device-width : 736px) 
  and (orientation : portrait) 
  and (-webkit-min-device-pixel-ratio : 3) 
{ }

有没有其他人遇到过同样的问题and/or知道解决方法吗？

Answer 1

@media only

在技术上已被弃用（http://dev.w3.org/csswg/mediaqueries-4/），不需要 "only"，因此这可能是问题的一部分。

但是，我在 iPhone 6 上没有成功使用@media，但目标至少为 1000 像素。

他们的缩放方法似乎是以桌面~2k 分辨率将图像发送到 Safari 移动浏览器，然后本地设备图像缩放处理缩放。

看来需要一种新方法，或者至少需要更多特定于设备的方法。

@media 查询不会在横向模式下触发 iPhone 6 plus

@media query doesn't trigger for iPhone 6 plus in landscape mode

iphone

css

media-queries

mobile-safari

screen-orientation