コーディングで遭遇した問題のあらゆる種類の解決策を見つけるために、しばらくの間 StackOverFlow にアクセスしていたので、解決策が見つからない問題に遭遇したときに投稿する場所になると考えました。
昨日、自分のサイトのメディア クエリを変更しました。すべてが雑然としないように、最終的にドロップ ダウン ナビゲーションを追加することができたからです。それはうまくいきました。しかし今、私は問題に遭遇しました。
S3 にサイトをロードすると、すべてが期待どおりに表示されます。ただし、横向きに回転すると、ヘッダーとナビゲーションは表示されますが、すべてのページ コンテンツは表示されません。それはすべてそこにあります...表示されないテキストを「強調表示」して、表示されない画像を保存することはできますが、何も表示されません。縦向きに戻すと、すべてが正常に表示されます。
このサイトは単一ページのデザインで、jQuery を使用して「ページ」をナビゲートします。ドロップダウンに機能を追加するために変更した唯一のコードです...
// toggle nav
$("#menu-icon").on("click", function () {
$("#nav").slideToggle();
});
メニューアイコンが表示されているときにナビゲーションを非表示にする
// When a nav link is clicked
$("a.tab").click(function () {
// Hide Nav menu if #menu-icon is visible
if ($("#menu-icon").is(":visible")) {
$("#nav").hide();
}...
私が行った CSS の唯一の変更は、メニュー アイコンのスタイル設定、最初は非表示にすること、メディア クエリで表示することでした...
@media screen and (max-width: 600px) {
/*Page Elements*/
#menu-icon
{
display: block;
color:#bababa;
font-size:1.5em;
float:left;
margin-left:2em;
background:url(Images/Menu.png) no-repeat 5px center;
background-color:rgba(0, 0, 0, 0.6);
width:110px;
border: 1px solid #787878;
border-radius:.35em;
padding: .5em .5em .5em 2em;
}
それで、私の質問は、ランドスケープで消えているコンテンツで何が起こっているのか知っている人はいますか? どんな助けでも大歓迎です。
そうそう、iPhone、デスクトップ、iPad などですべて正常に動作しています。
よろしくお願いします！
=======更新========
メディアクエリで問題を切り分けました。どうやらこの動作は、ページの上部に再配置するときに追加さposition:relativeれたによって引き起こされているようです。header電話を回転させるときに問題が発生する理由がわかりません（おそらく奇妙なバグですか？）。横向きの Galaxy S3 のみを対象とするメディア クエリを作成しposition:absolute、レイアウトが崩れないように、コンテンツのスタイリング ルールをいくつか追加して使用します。すべてが正常に機能するようになったら、もう一度更新します。
=======更新2========
今解決しました。コンテナ divを持っていなかったoverflow:autoので、すべてが再配置された後にコンテンツをラップしていませんでした。overflow:autoDolphin と Android Browser でなぜ noが原因でposition:relative表示が壊れていたのかはまだ完全にはわかりませんがheader、現在は機能しているので、先に進んでいるうちにやめようと思います。ありがとう！