1

我希望在我的手机上查看我的网站时，在纵向模式下显示一种颜色，在横向模式下显示另一种颜色。问题是：

  1. 当我以纵向模式开始时，它可以工作。即使在刷新之后。但是当我将手机旋转到横向模式时，它可以工作一次。刷新或旋转回纵向会导致样式丢失，即。未加载 css 文件。
  2. 当我以横向模式开始时，没有样式。当我旋转到纵向时，我从场景 1 中的确切情况开始。

仅供参考，我正在使用 django 并在 Heroku 上进行部署。它似乎工作正常 - 我没有在我的桌面上遇到任何样式问题。（我在下面的代码中删除了桌面屏幕的媒体查询。）当我之前说“开始”时，我的意思是切换这个命令：heroku ps:scale web=1

有任何想法吗？

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, width=device-width, height=device-height, target-densitydpi=device-dpi,user-scalable=yes" />

    </head>
    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 384px)" 
        href="{% static 'home/style.css' %}" />

    <div id="wrapper"><div class="hello"><p>hello.</p></div></div>
</html>

和

/* nexus 4 landscape mode */
@media only screen and (min-width: 385px) {
    .hello {
        color:  firebrick;
        font-size: 5em;
    }
}
/* nexus 4 portrait mode */
@media only screen and (max-width: 384px) {
    .hello {
        color: greenyellow;
        font-size: 4em;
    }
}
html,body {
    height: 100%;
    font-size:100%;
    max-width: 100%;
}
#wrapper {
    padding-top: 10%;
    height: 100%;
    background-color: cornsilk;
}
4

0 回答 0