在移动设备上横向/纵向模式之间切换时出错

时间:2014-08-02 11:14:41

标签: css mobile media landscape portrait

我制作了一个适合横向和纵向模式移动的模板,我必须"删除"一些物体,因为景观中没有空间,然后我在景观中使用了display:none,并设置了纵向的正常尺寸,但当我进入手机,并使开关横向变为纵向时,即使在纵向模式下,对象也会消失...

或多或少的css结构是这样的:

@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1080px) and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media screen (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) and (device-width: 1920px) and (orientation: landscape) {.object {display:none}}

任何建议? :)

1 个答案:

答案 0 :(得分:0)

在您的媒体查询中,您说每个-webkit-min-device-pixel-ratio: 1.5的设备都会获得两个CSS属性....

如果你只想在风景和肖像之间做出改变,你应该这样做:

@media only screen and (orientation: portrait) {.object {width: ...; height: ...; top: ...; margin-left: - ...;}}


@media only screen and (orientation: landscape) {.object {display:none}}

其他媒体查询并非必要。