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

时间:2015-04-07 22:58:08

标签: iphone css3 media-queries mobile-safari screen-orientation

我一直在根据关于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) 
{ }

其他人是否遇到过同样的问题和/或了解某种解决方法?

1 个答案:

答案 0 :(得分:2)

@media only

技术上已弃用(http://dev.w3.org/csswg/mediaqueries-4/),不需要“仅”,因此可能是问题的一部分。

然而,如果没有至少1000px的目标,我在iPhone 6上一般没有@ media的成功。

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

似乎需要一种新方法,或者至少需要更多特定于设备的方法。