最近、仕事でモバイルページを作成しました。もともと特別なことではありませんでしたが、非常に奇妙に感じ、これまでに遭遇したことのない要件がありました。つまり、作成したページをアプリに配置する必要がありますが、このアプリは横長モードで、このページを開くWebビューも横長モードです(最新バージョンのアプリは、開いたときに縦長モードになります)。もともとremレイアウトを使用しており、横長モードでも問題はありませんでしたが、クライアントは、横長モードで開いたときにページを強制的に縦長モードで表示することを望んでいます。そこで次のような一連の操作が行われます。 最初のステップは、次のコードを使用して水平画面の状態を決定することです。 関数orient() { if(window.orientation == 90 || window.orientation == -90){//水平画面//iPad、iPhone 垂直画面; Android 水平画面//$("body").attr("class", "landscape"); // 方向 = '横'; //alert("ipad、iphone 縦画面; Android 横画面"); $("p").text("水平画面"); false を返します。 } else if(window.orientation == 0 || window.orientation == 180){// 垂直画面 // ipad、iphone 水平画面; Android 垂直画面 // $("body").attr("class", "portrait"); // 方向 = '縦'; //alert("ipad、iphone 横画面; Android 縦画面"); $("p").text("縦画面"); false を返します。 } } //ページが読み込まれたときに呼び出す$(function() { オリエント(); }); //ユーザーが画面の向きを変更したときに呼び出されます$(window).on('orientationchange', function(e) { オリエント(); }); これは携帯電話の方向を監視するためです。ただし、アプリは横向きモードで開かれているため、これを検出することはできません。また、前提条件として、携帯電話で自動回転がオンになっている必要があります。そのため、上記の方法は放棄されました。 インテリジェントな方法は放棄されたので、最も安価な方法は画面の幅と高さを監視することです。高さが幅より大きい場合は、携帯電話が縦向きモードであると想定します。幅が高さより大きい場合は、携帯電話が横向きモードであると想定します。 (もちろんこれにも制限はありますが、新しいアプリでは横画面と縦画面の問題が解決されていることを考慮して、ここではこのようにします)。画面が縦向きモードのときは何もする必要はありません。しかし、横向きモードでは、ページを 90 度回転する必要があります。では、早速コードを見てみましょう。 // CSS3回転を使用してルートコンテナを反時計回りに90度回転させ、ユーザーに画面を垂直に表示するように強制します。var detectOrient = function() { var 幅 = document.documentElement.clientWidth、 高さ = document.documentElement.clientHeight、 //$wrapper = document.getElementsByTagName("body")[0], $wrapper = document.getElementById("vue"), スタイル = ""; if(width <= height) { // 水平画面 // style += "width:" + width + "px;"; // 回転後に幅と高さが切り替わることに注意してください // style += "height:" + height + "px;"; // スタイル += "-webkit-transform: rotate(0); transform: rotate(0);"; // スタイル += "-webkit-transform-origin: 0 0;"; // スタイル += "transform-origin: 0 0;"; スタイル += "フォントサイズ:" + (幅 * 100 / 1125) + "px"; var html_doc = document.getElementsByTagName("html")[0]; html_doc.style.cssText = "フォントサイズ:" + (幅 * 100 / 1125) + "px"; } else { // 垂直画面スタイル += "width:" + height + "px;"; スタイル += "min-height:" + 幅 + "px;"; スタイル += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);"; // 回転の中点の処理に注意してください style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;"; style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;"; //スタイル += "font-size:" + 高さ * 100 / 1125 + "px;"; //$("html").css({"font-size":(height * 100 / 1125),"overflow-y":"hidden"}); var html_doc = document.getElementsByTagName("html")[0]; html_doc.style.cssText = "font-size:" + height * 100 / 1125 + "px;" + "overflow-y:"+"hidden;"+"height:"+height+"px;"; スタイル += "overflow-y: hidden;" タブを追加します。 $wrapper.style.cssText = スタイル; } } ウィンドウのサイズ変更時に方向を検出します。 方向を検出します。 関数 add_tab(){ var clone_tab = $("footer").clone(); $("フッター").remove(); clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"右上"}) $("body").append(clone_tab); clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left":"auto","top":"0","width":"11.25rem","height":"1.77rem"}) } このコードはフロントエンド担当者にとってそれほど難しいものではないと思いますが、注意すべき点が 3 つあります。 最初のポイント: 最初は、利便性のために HTML 全体を回転させていました。しかし、問題がありました。ページ内の固定要素の配置が効果的ではなくなりました (コード内の <footer> がタブスイッチとして下部に配置されています)。これを変更する必要があります。親要素を回転させても子要素には機能しないため、親要素を回転させるのではなく、その兄弟要素を直接回転させる必要があります。ここでは、ページ内の他のすべてのコンテンツがこの div 内にあるため、#vue という要素を回転させています。そこでこの要素を回転させました。すると、この時点では配置は使用できますが、スタイルが間違っているため、add_tab 関数でこの要素のサイズとスタイルを調整して、画面の右側、つまり縦向きモードで画面の下部に正常に表示できるようにします。 2点目: 2つ目の注意点は、remレイアウトを使用しているため、通常はhtmlのfont-sizeを変更することになりますが、このとき注意が必要です。回転すると幅が高さになり、高さが幅になるため、ルートディレクトリのフォントサイズを計算するには高さを使用する必要があります。 3点目: 3 番目のポイントはプログラムに記録されており、回転の中心に注意する必要があります。デフォルトの回転中心は、選択した要素の中心点です。ほとんどの場合、回転の中心点を変更する必要があります。回転後、HTML の overflow-y: hidden も設定する必要があります。そうしないと、不要なスクロールが発生します。 このように、基本的にページ全体が回転し、下部の固定位置にある要素が再び正常に配置されます。幸いなことに、使用したポップアップ ウィンドウは layui ポップアップ ウィンドウだったので、それを 90 度回転するだけで済みました。 ps: 最後に、解決できない問題を見つけました。それは、ページが十分に長い場合、つまりスクロールバーがある場合、ポップアップウィンドウが表示された後、マスクレイヤーをその背後にスライドすると、その背後にあるページが上にスライドしてしまうことです。この問題は解決できます。上記の記事では固定配置を使用して解決していますが、回転のためこの問題は無効になるため、これより良い解決策はありません。ポートレートモードでも大丈夫です。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Linux で LVGL エミュレータをコンパイルする際のエラーの解決方法
>>: 相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション
目次01 シナリオ分析02 操作方法03 結果分析01 シナリオ分析今日の午後、開発仲間がオンライン...
序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...
まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...
目次概要1. バックエンドデータの取得と処理2. インターフェース表示処理概要前回のエッセイ「ステッ...
効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...
目次背景問題分析1. 属性値はJson形式であり、Json操作関数を使用して処理する必要があります。...
Gird レイアウトは Flex レイアウトといくつかの類似点があり、どちらもコンテナーの内部項目を...
1. 仮想マシンの準備1. 新しい仮想マシンを作成する 2. 仮想マシンのカスタマイズを選択する 3...
Linux でファイルを編集した後、保存して終了するにはどうすればよいですか?保存して終了するコマン...
1. Apache Benchの紹介ApacheBench は、Apache サーバーに付属する W...
目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...
1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...
矢印関数は ES6 の新機能です。独自の this はありません。その this ポイントは外部のコ...
通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...
1. package.jsonに追加する "メイン": "electr...