CSS (メディアクエリ) はモバイル側の水平および垂直画面プロンプトを実装します_html/css_WEB-ITnose

モバイル端末のレイアウト開発では、水平画面と垂直画面によってもたらされる異なるレイアウトを考慮する必要があることがよくありますが、場合によっては、より良いユーザーエクスペリエンスを実現するために、垂直または水平の画面レイアウトしかない場合があります。レイアウトされていないページはよりフレンドリーになります。インターネット上の誰かが、開発者がワンクリックでプラグインを追加できるようにいくつかのプラグインを作成しています。たとえば、このブログで言及されている lanscape.js プラグインの方が便利です (記事リンク: 水平画面と垂直画面を切り替えるためのヒント)。モバイルページ）しかし、そのソースコードを見てみると、このような小さな機能の実装方法は少し高価であるように感じます。ここで、この問題を解決するには、CSSでメディアクエリ応答レイアウトを使用するだけで済みます。 CSSのメディアクエリは横画面と縦画面を自動的に識別できるようになっています（主に画面のアスペクト比に基づいて判断されますが、モバイル端末のウィンドウの向きとは異なります）。これのもう1つの用途はブラウジングです。 PC では通常、横向きのレイアウトになります。モバイル端末向けの一部の Web ページについても、ここで説明します。
CSSメディアクエリの水平および垂直画面レイアウト:
ポートレート:

@media screen and (orientation:portrait)

landscape:

@media screen and (orientation:landscape)

ロジックは次のとおりです。デフォルトで表示されるプロンプト div を事前に設定します。スタイルで縦画面または横画面の非表示を設定することで、横画面と縦画面のプロンプトが実現されます。p:
横画面と縦画面のプロンプト (携帯電話上またはシミュレーション) サーバー上で実行)

コード:
HTML

<div class="lock_wrp" id="lock">        <div class="lock">            <i></i><br>            请使用移动终端竖屏浏览,体验更佳        </div>    </div><div id="content">Content</div>

CSS:

@media screen and (orientation:portrait) {.lock_wrp {    display: none!important}}@media screen and (orientation:landscape) {.pages {    display: none!important}}.lock_wrp {    position: absolute;    width: 100%;    height: 100%;    overflow: hidden;    left: 0;    top: 0;    background-color: #3c98d1;    color: rgba(255,255,255,.8);    z-index: 9999}.lock {    position: absolute;    left: 50%;    top: 50%;    width: 250px;    height: 150px;    margin: -75px 0 0 -125px;    text-align: center}.lock i {    position: relative;    display: block;    width: 74px;    height: 110px;    background: url(http://i11.tietuku.com/8f15d51b901bd922.png) 0 0 no-repeat;    background-size: 100%;    margin: 0 auto;    -webkit-transform: rotate(-90deg);    transform: rotate(-90deg);    -webkit-animation: iphone 1.6s ease-in infinite;    animation: iphone 1.6s ease-in infinite}@-webkit-keyframes iphone {0% {-webkit-transform:rotate(-90deg)}25% {-webkit-transform:rotate(0deg)}50% {-webkit-transform:rotate(0deg)}75% {-webkit-transform:rotate(-90deg)}100% {-webkit-transform:rotate(-90deg)}}@keyframes iphone {0% {transform:rotate(-90deg)}25% {transform:rotate(0deg)}50% {transform:rotate(0deg)}75% {transform:rotate(-90deg)}100% {transform:rotate(-90deg)}}#content{position: absolute;width:100%;height:100%;background:#3c98d1;overflow: hidden;    left: 0;    top: 0;color:white;}

また、モバイルデバイスでは、通常、画面の水平と垂直の状態を決定する window.orientation API がありますが、プロンプト機能だけであればJSは必要ないようです CSSだけで介入できます。