0

トリミングなしで可能な限り大きな投稿の注目画像を表示する、フルスクリーンのモバイルフレンドリーなテーマを作成しようとしています。これは、横向きではそれらをheight:100%; width:auto;で表示しますが、縦向きではそれらを表示することを意味しますwidth:100%; height:auto。(多くのiOSアプリと同様です。)

問題は、WordPressでこれを機能させるのに時間がかかるという本当のバガーがいることです。テーマを静的HTMLテストサイトとして開発したとき、すべてが完全に正常に機能しました。しかし、どういうわけか、サイトをテーマに変換すると、縦向きの幅100%を無視し始めました。

同じポートレートメディアクエリ内にあるナビゲーションメニューが正常に機能するため、壊れている/無視されているのはメディアクエリ自体ではないことを私は知っています。

当初、WordPressのインライン画像サイズがレスポンシブサイズを上書きしたと思っていましたが(カスケード的には意味があります)、画像は横向きのビューポートで高さ100%で正常に表示されるため、そうではないようです。ポートレートでは、height:autoコマンドをリッスンしているようです。

width: 100%;無視されているのは文字通りコマンドだけです。

max-width: 100%また、念のために追加して、さまざまな場所で!importantを試してみました。無効。

これがコードで、ばかげたセミコロンが欠落していないことがわかります。

#content img {
width:100%;
max-width:100% !important;
height:auto;
}

CSSも検証しましたが、何も問題はないようです。

そしてこれがHTMLです

<div  id="content">                 
               <div title="Click to flip" class="sponsor">

                    <div class="sponsorFlip">
                        <?php 
                            if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                              the_post_thumbnail();
                            } 
                        ?>

                    </div>

                    <div class="sponsorData" style="display:none">
                    <?php 
                        if( class_exists( 'kdMultipleFeaturedImages' ) ) {
                        kd_mfi_the_featured_image( 'featured-image-2', 'post' );
                        }
                    ?>      
                    </div>

                </div>
            </div><!-- End div #content -->

&ここにいくつかのスクリーンショットがあります。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

お願いします、ああお願いします、誰かが私の肖像画の問題から私を救ってください。

4

2 に答える 2

0

これを試してみてください、多分...

部分的にこれを与え<head />ます。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2013-01-12T03:02:21.200 に答える
0

ですから、基本的にこれを解決したので、思い通りに動作するようになりました。しかし、なぜ今動作するのかはよくわかりません。

Portrait Media Queryを削除したので、デフォルト設定はportraitであり、その後、条件付きで横向きのものをそこに残しました。ポートレートメディアクエリとランドスケープメディアクエリの両方を同じドキュメントに入れることに何か問題がありますか?私はそれについて何もウェブ上で見つけることができないようです、そして私がサイトをワードプレステンプレートに変換したときだけ私がこの問題を抱えていたと確信しています。

于 2013-01-14T13:37:51.027 に答える