在CSS中将目标设备纵横比降至某个阈值以下

时间:2015-04-24 14:22:41

标签: css media-queries

我的大脑被塞住了。

如何定位设备宽高比低于16/9的所有设备。比16/9更胖?这似乎不起作用。

仅适用于iOS / Android cordova应用中的肖像。

@media only screen and (max-device-aspect-ratio: 16/9) {
}

2 个答案:

答案 0 :(得分:1)

您是否尝试过宽高比?如果设备的横向宽度超过16/9,并且您是肖像,请尝试:

@media ALL and (max-aspect-ratio: 9/16) { 
    /* style your super tall content here */
}

JS小提琴:http://jsfiddle.net/zo7xuj15/1/

浏览器应该占用您设备的屏幕,在这里您不必担心方向。请注意,媒体查询中的样式仅在超高(超过9/16)时激活。

答案 1 :(得分:0)

定位所有设备/分辨率;我认为非常困难,因为他们有不同的默认移动视口设置和默认的移动浏览器设置。通常情况下,您必须以不同方式处理每个支持的设备,有时在处理媒体,视频,动画等时会有很大不同。

您应该坚持支持每台设备解决方案。

EG。

iPhone (移动版Safari)分辨率X,Y,Z

iPad (移动版Safari)分辨率X,Y,Z

Android (Chrome Webkit)分辨率X,Y,X

Blackberry (Opera)分辨率X,Y,X

你明白了......