1

メタ ビューポート タグと組み合わせて使用​​する CSS メディア クエリに問題があります。ホーム画面のスタンドアロン ビュー内で動作する iPad webapp を作成しています。

これはCSSです：

.header_portrait {

    position: relative;
    top: 0px;
    left: 0px;
    background: #ccc;
    width: 1536px;
    height: 219px;

}

.header_landscape {

    position: relative;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 1536px;
    height: 219px;

}

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .header_landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .header_portrait { display: none; }
}

これは HTML の一部です<head>:

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes">

これは HTML の一部です<body>:

<div class="header_portrait" ontouchmove="togle_touch('disable');">

</div>
<div class="header_landscape" ontouchmove="togle_touch('disable');">

</div>

頭の向きの検出からメタ ビューポート タグを削除すると、正常に動作します。ビューポートが max-device-width を台無しにして、CSS メディア クエリがそれを適切に検出しないようです。

どんな助けでも大歓迎です:)

4

1 に答える 1

0

（コメントまたは編集で回答。回答がない質問を参照してください。ただし、コメントで問題が解決されています（またはチャットで拡張されています））

OP は次のように書いています。

私はこれを解決しました！

置き換えるだけです：

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />

と：

<meta name="viewport" content="width=device-width, maximum-scale=0.5" />

今のところ問題なく動作しており、iPad 3 では iPad 1 と 2 でテストする必要があります...

于 2015-01-26T14:27:27.400 に答える