显示：旋转智能手机时无答案

【问题标题】：Display:none when rotating smartphone显示：旋转智能手机时无
【发布时间】：2012-04-07 22:56:46
【问题描述】：

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

#mobilepicture {
display: none;
}

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

这是 mobile.css 的一部分：

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

切换到 mobile.css 时，一切似乎都正常（显示移动图片，显示图片：无），直到我将手机侧向倾斜。当我这样做时，股票图片会再次显示。我知道是因为开头的选择器：

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

【问题讨论】：

你可以尝试添加更多条件，例如高度吗？
试过了，完全停止加载 CSS

标签： html css mobile media-queries

【解决方案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;
    }
}

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

【讨论】：

in index php: --- 其他东西
Style.css: /*Stockpicture*/ #stockpicture { float: left;位置：相对；顶部：-65px；左：100px； } /* 手机图片*/ #mobilepicture { display: none; } Mobile.css: #stockpicture { display: none; }
#mobilepicture { float:left;明确：两者；填充：40 像素 15 像素 95 像素 20 像素；边距底部：100px；移动图片与段落（应该没问题）一起包裹在内容框（图像）内，库存图片与内容框重叠。您还需要更多？
你能把相关的 HTML 放在问题的编辑中吗？