メディアを使用して、画面幅で発生した問題を決定します。
iOSでは、画面を回転させるときにそれを行うことができますが、Androidで応答しませんでした。水平画面には、垂直の画面スタイルがまだ表示されます。
情報をチェックした後、CSS3のメディアがモバイル側のディスプレイ効果を向上させたい場合は、このコードをページのヘッダーに追加する必要があります。
<meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、maximing-scale = 1.0、user-scalable = no">
しかし、私はこのコードを使用することはできません。私のページが適応されているからです。フォントのサイズとスタイルのサイズは、画面のサイズに応じて表示できます。このコードを追加すると、適応は機能しません。したがって、他の方法を使用してください
解決：
モバイルデバイスは、イベント：OrientationChangeイベントを提供します
このイベントは、SafariのためにAppleによって追加されました。そのため、開発者はユーザーがデバイスをランドスケープビューからポートレートビューモードに切り替えるタイミングを決定できるようにします。
このイベントは、デバイスが回転するとトリガーされます。
// Orientation changeswindow.addeventlistener（ "OrientationChange"、function（）を聞く{//新しいOrientation numberert（window.orientation）;}、false）;ユーザーがデバイスの視聴モードを変更する限り、OrientationChangeイベントがトリガーされます。現時点でのイベントオブジェクトには、貴重な情報は含まれていません。
唯一の関連情報はwindow.orientationを介してアクセスできるため
オリエンテーション属性
0,90、-90の3つの値があります
0はポートレート、-90は、デバイスが右側のランドスケープモードに水平に回転することを意味し、90はデバイスが左のランドスケープモードに水平に回転することを意味します。
180の別のものがあります。これは、垂直スクリーンを意味しますが、反転した垂直画面モードです。しかし、このモデルはまだサポートされていません。
図に示されているように：
したがって、このOrientationChangeイベントとウィンドウの向きの特性を組み合わせて、デバイスが水平画面にあるか垂直画面にあるかを判断するのが簡単です。
（function（）{var init = function（）{var updateorientation = function = function（）{var orientation = window.orientation; switch（wortheration）{case 90：case -90：case -90：oterination = 'landscape'; //ここでは水平ブレークです;デフォルト：オリエンテーション= 'ポートレート'; // Vertical Screen //plusportdocument.body.body.parentnode.setattribute('class'lyientation) ;// updateorientation（）;}; window.addeventlistener（ 'domcontentloaded'、init、false）;}）（）（）;したがって、クラスは異なる回転状態に従って追加できるため、CSSはこのように書くことができます
/**パフォーマンスボディは赤を表示します
別の執筆方法は、メディアクエリを使用することです
@media all and（Orientation：Portrait）{body div {background：Red;}} @media all and（Orientation：Landscape）{body div {background：blue; }}このオリエンテーションメディアクエリは、iOS3.2+およびAndroid 2.0+で動作します。
比較的言えば、この種のコードはもう少し簡潔です。上記のJS+CSSでは、この種のコードは純粋なCSSです。デバイスが回転すると、方向を変更するCSSは、デバイスの方向に応じて呼び出されます。
互換性
一部のデバイスは、OrientationChangeイベントを提供しませんが、ウィンドウのサイズ変更イベントをトリガーしません。そして、メディアクエリがそれらをサポートしない場合、私たちは何をすべきですか？
サイズのイベントで審査できます。 InnerwidthとInnerheightを使用して、画面サイズを取得します。幅と高さの比較から判断すると、幅と高さは垂直スクリーンであり、幅と高さは水平スクリーンです。
コードは次のとおりです。
（function（）{var updateOrientation = function（）{var orientation =（window.innerwidth> window.innerheight）？ 'landscape'： 'portray'; document.body.parentnode.setattribute（ 'class'、orteration）;}; var initorientation（）{updateorientation（）; window.addeventlistener（ 'resize'、updateorientation、false）;}; window.addeventlistener（ 'domcontentloaded'、init、false）;}）（）（）;このようにして、ブラウザの画面回転によってもたらされるスタイルの変更を確認できます。
2つの検出方法の組み合わせは次のとおりです。
(function(){var supportOrientation = (typeof window.orientation === 'number' &&typeof window.onorientationchange === 'object');var init = function(){var htmlNode = document.body.parentNode,orientation;var updateOrientation = function(){if(supportOrientation){orientation = window.orientation;switch(orientation){case 90:case -90：Orientation = 'Landscape'; break; default：oterination = 'portrait';}} else {window.innerwidth> window.innerheight）？ 'Portrait';} htmlnode.setattribute（ 'class'、orientation）;}; if（supportorientation）{window.addeventlistener（ 'orientationchange'、updateorientation、false）;} else {//サイズのイベントを聞いてくださいwindow.addeventlistener（ 'resize'、updateorientation、false）;} updateorientation（）;}; window.addeventlistener（ 'domcontentloaded'、init、false）;}）（）（）;この方法を使用して、モバイルデバイスの迷惑な水平および垂直画面検出を解決できます。