7

ランドスケープ モードで最適に表示される Web サイトがあります。ユーザーがWebサイトを横向きモードでロードした場合は問題ありませんが、縦向きモードでロードしたり、横向きから縦向きモードに回転したりすると、画面全体を占める画像または何かがポップアップして、回転して元に戻すように求められます。風景？Javascript / jQueryでこれができると考えてください。

iPad で Game Informer アプリを使用してこれを行うのを見たことがあります。ユーザーがアプリを縦向きで開いたり、横向きから縦向きに回転したりすると、不透明な画像がポップアップし、回転して横向きに戻すように求められます。[iPadのスクリーンショットを見る] ここに画像の説明を入力

4

3 に答える 3

3

質問にタグを付けたのを見たresponsive-designので、Javascript を必要とせず、CSS だけで実行できるソリューションを提供できると考えました。

横向きモードと縦向きモードを切り替えるときに使用できる 2 つの異なる画面サイズがあることを知っていれば、メディア クエリを使用してオーバーレイを表示および非表示にすることができます。

HTML:

<div id="content">
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p>
</div>

CSS:

#rotate {
    display: none;
}

@media screen and (max-width: 300px) {
    #rotate {
        background-color: rgba(0,0,0,0.5);
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 100%;
    }
}

これは、使用可能な幅を確認するだけで、300px 以下の場合は、オーバーレイするコンテンツが表示されます。利用可能な幅が 300px より大きい場合、コンテンツが非表示になります。モバイル デバイスのさまざまな幅に合わせてこの値を調整して、ポートレート モードかランドスケープ モードかを確認できます。

中央の垂直バーを動かしてプレビュー ウィンドウを大きくしたり小さくしたりして、jsfiddle でこれをテストできます: http://jsfiddle.net/wv6Vp/

于 2013-07-31T14:29:45.227 に答える