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