少し前に、H5プロジェクトを行い、水平および垂直の画面が変更されたときに処理を行う必要がありました。 Horizontalおよび垂直スクリーンの変化を監視するために、OrientationChangeを使用する必要があることは間違いありません。
プラン1：
// Orientation ChangesWindow.AddeventListener（ "OrientationChange"、function（event）{// event.Orientation | screen.Orientation.Angleが0 | 180、90 | -90度}、falseに基づいて、水平および垂直スクリーンを判断する）;コードが追加された後、さまざまな互換性の問題があります。互換性の問題は、2つの場所でここで発生します。
OrientationChange
event.Orientation | screen.Orientation.Angle
以下は、OrientationChangeイベントの互換性です。
以下は、screen.orientationの互換性です。
プラン2：上記の計画は機能しないため、他の方法のみを実行できます。 Googleとそれがsezize（window.inner/outourwidth、window.inner/outourthheight）によって達成できることを学びます：
window.addeventlistener（ "resize"、function（event）{var orientation =（window.innerwidth> window.innerheight）？ "landscape"： "portrait"; if（oritentation == 'portrait'）{//このソリューションは基本的にほとんどのプロジェクトのニーズを満たしていますが、まだいくつかの欠点があります。
ウィンドウのサイズが変化する限り、サイズ変更イベントは継続的にトリガーされます。 Settimeoutを使用して最適化できます
水平画面と垂直画面を監視する必要がある複数の場所がある場合は、複数のWindows.AddeventListener（ "resize"、function（event）{...}）を登録する必要があります。サブスクリプションモードと公開モードを使用して改善できますか？水平画面と垂直画面の変更を監視するためにサイズを登録し、水平および垂直の変更が発生している限り、購読されたオブジェクトに通知を公開します。水平画面と垂直画面を監視する必要がある他の場所は、購読にすぎません。
重要なコードは次のとおりです。
var resizecb = function（）{if（win.innerwidth> win.innerheight）{//判断Meta.init = 'landscape';を初期化Meta.Current = 'landscape'; } else {meta.init = 'portrait'; Meta.Current = 'Portrait'; } return function（）{if（win.innerwidth> win.innerheight）{if（meta.current！== 'landscape'）{meta.current = 'landscape'; event.trigger（ '__ OrientationChange__'、Meta）; }} else {if（meta.current！== 'portrait'）{meta.current = 'portirat'; event.trigger（ '__ OrientationChange__'、Meta）; }}}}}}}}（）;ここでは完全なコードがクリックされます
プラン3：
しかし、私は個人的には、window.innerwidth> window.innerheightの実装は一種の擬似検出であり、少し信頼できないと思います。ブラウザを介して検出を実現できますか？これは、CSS3@メディアメディアクエリに基づいています。
次のように、@media互換性：
上記の図に示すように、モバイルブラウザーはCSS3メディアをサポートしています。
実装のアイデア：
水平および垂直の画面ステータスを識別する特定のCSSスタイルを作成する
JSを介してCSSコードをページに挿入します
サイズ変更コールバック関数は、水平画面と垂直画面のステータスを取得します
ここでは、<html> </html>のノードフォントファミリーを検出スタイル属性として選択します。理由は次のとおりです。
<html> </html>を選択して、主にリフローと塗り直しを避けます
フォントファミリースタイルは、主にフォントファミリーに次の特性があるためです。
このようにして、特定のロゴを指定して水平画面と垂直画面のステータスを識別できますが、指定されたロゴは他のフォントの前に配置する必要があるため、HMTLフォントの変更が発生しません。
重要なコードは次のとおりです。
// callback var resizecb = function（）{var hstyle = win.getcomputedStyle（html、null）、ffstr = hstyle ['font-family']、pstr = "Porterit、" + ffstr、lstr = "landscape、" + ffstrなど.orientation {font-family： ' + pstr +';}} @media（orientation：landscape）{.orientation {font-family： ' + lstr +';}} '; //ロードスタイルLoadStylestring（CSSSTR）; // class html.classname = 'orientation' + html.classnameを追加します。 if（hstyle ['font-family'] === pStr）{// Judgement Meta.init = 'Portrait'を初期化; Meta.Current = 'Portrait'; } else {meta.init = 'landscape'; Meta.Current = 'landscape'; } return function（）{if（hstyle ['font-family'] === pStr）{if（meta.current！== 'portrait'）{Meta.Current = 'Portime'; event.trigger（ '__ OrientationChange__'、Meta）; }} else {if（meta.current！== 'landscape'）{meta.current = 'landscape'; event.trigger（ '__ OrientationChange__'、Meta）; }}}}}}}（）;ここでは完全なコードがクリックされます
テスト結果
ポートレート効果：
風景効果：
計画4：
あなたはそれを改善することができます。 OrientationChangeをサポートするときは、ネイティブオリエンテーションチャンジを使用します。そうでない場合は、ソリューション3を使用します。
重要なコードは次のとおりです。
// OrientationChangeイベントがサポートされているかどうかisorientation =（ウィンドウの「オリエンテーション」&& 'OnorientationChange'の 'OnorientationChange'）; Meta.Current = 'Portrait'; } if（win.orientation === 90 || win.orientation === -90）{meta.init = 'landscape'; Meta.Current = 'landscape'; } return function（）{if（win.orientation === 180 || win.orientation === 0）{meta.current = 'portilem'; } if（win.orientation === 90 || win.orientation === -90）{meta.current = 'landscape'; } event.trigger（eventType、Meta）; }}; var callback = isorientation？ OrientationCb（）：（function（）{resizecb（）; return function（）{timer && win.cleartimeout（Timer）; Timer = win.settimeout（Resizecb、300）;}}）;ここでは完全なコードがクリックされます
プラン5：
現在、上記のソリューションはすべて、カスタマイズされたサブスクリプションおよび公開イベントモードを通じて実装されています。ここでは、OrientationChangeをブラウザのイベントメカニズムに基づいてシミュレートできます。つまり、OrientationChangeの非互換性を修正します。
重要なコードは次のとおりです。
var eventType = 'OrientationChange'; // Trigger Native OrientationChangeVar fire = function（）{var e; if（document.createevent）{e = document.createevent（ 'htmlevents'）; E.IniteVent（eventType、true、false）; win.dispatchevent（e）; } else {e = document.createeventobject（）; e.EventType = eventType; if（win [eventType]）{win [eventType]（）; } else if（win ['on' + eventType]）{win ['on' + eventType]（）; } else {win.fireevent（eventType、e）; }}}ここでは完全なコードがクリックされます
上記の5つのソリューションを通じて、モバイル端子での水平および垂直の画面検出をさらに理解しています。自分で経験した後、自分でいくつかのことを書く理由だけを知っています。また、記事に理由を記録し、それらがすべての人に役立つことを望んでいます。 5つのソリューションが最終オリエンテーションの変更フィックスに進化した後、githubアドレス：https：//github.com/zhansingsong/orientationchange-fix
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。