Question

我目前正在为移动设备制作网站。在style.css中我得到了

#mobilepicture {
display: none;
}

#stockpicture {
float: left;
    position: relative;
    top: -65px;
    left: 100px;
}

这是mobile.css的一部分：

#stockpicture {
display: none;
}
#mobilepicture {
...
}

当切换到mobile.css时，一切似乎都很好（显示mobilepicture，stockpicture display：none），直到我将手机侧向倾斜。当我这样做时，stockpicture会再次显示。我知道这是因为开头的选择器：

index.php：

<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 481px)"  />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head> 
<!-- Head end-->
<!-- Body start-->
<body>
    <!-- stockpicture-->
    <div id="stockpicture">
            <img src="images/stockpicture.png" alt="stockpicture"/>
        </div>
    <!-- stockpicture end-->
    <!-- Start Container-->
    <div class="container">
        <!-- Content start -->
        <div id="contentindex">
        <!-- Mobile picture-->
            <div id="mobilepicture">
            <img src="images/mobilepicture.png" alt="mobilepicture" width="200" height="300"/>
        </div>
        <!-- Mobile end -->
            <h2> Home </h2>
            <p>Snippet.</p> </div>

  <!-- end .container --></div>

还有其他方法可以解决这个问题吗？或者可能拒绝浏览器旋转？

干杯 JJ

Answer 1

您是否尝试在媒体查询中添加方向？

/* Portrait */
@media screen and (max-width: 480px) and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (max-width: 480px) and (orientation:landscape) {
    /* Landscape styles */
}

修改

好的，尝试将其全部剥离，这样你就可以看到什么是有效的，什么不是。首先，我将有一个包含多个媒体查询的样式表，因为这有助于提高性能 - Single vs multiple stylesheets in responsive web design

然后将其全部删除，并替换为一个简单的简单媒体查询，它可以执行简单的操作，例如更改正文的背景颜色。

/* Portrait */ @media screen and (max-width: 640px) and (orientation:portrait) { /* Portrait styles */ body { background: yellow; } } /* Landscape */ @media screen and (max-width: 640px) and (orientation:landscape) { /* Landscape styles */ body { background: red; } }

一旦您知道实际正在运行媒体查询，您就应该能够更轻松地进行故障排除。

显示：旋转智能手机时无

1 个答案: