手机切换横向/纵向模式时出错

Question

我正在制作一个适用于移动设备的模板，在横向和纵向模式下，我必须“移除”一些对象，因为横向中没有空间，然后我使用display:在横向中没有，并设置肖像的正常尺寸，但当我进入手机，并使切换横向肖像对象消失，即使在纵向模式...

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}}

其他媒体查询不是必须的。