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

Question

我制作了一个适合横向和纵向模式移动的模板，我必须＆＃34;删除＆＃34;一些物体，因为景观中没有空间，然后我在景观中使用了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}}

任何建议？ ：）

Answer 1

在您的媒体查询中，您说每个-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}}

其他媒体查询并非必要。