最近、仕事でモバイル ページを作成しました。最初は何もありませんでしたが、これまでに見たことのないような要件がありました。しかし、そのページは APP に配置されていました。横向きで、このページを開く Web ビューも横画面です (最新バージョンの APP は縦画面の Web ビューで開きます)。もともとレム レイアウトを使用しており、横画面の状態でも問題ありませんでしたが、A さんは画面が開いているときにこのページを強制的に垂直方向に表示するために、水平画面を使用したいと考えています。したがって、次のような一連の操作があります。
1 つ目は、次のコードを使用して、水平画面のステータスを確認することです。
function orient() { if(window.orientation == 90 || window.orientation == -90) {//横画面//iPad、iPhone 縦画面//$(body).attr(class, landscape); //orientation = 'landscape'; //alert(ipad, iphone の垂直画面; Andriod の水平画面); else if(window.orientation); == 0 || window.orientation == 180) {//垂直画面//iPad、iPhone 水平画面; Android 垂直画面// $(body).attr(class, portart);// 方向 = 'portrait'; //alert(ipad, iPhone の水平画面; Andriod の垂直画面); $(p).text(垂直画面) } } //ページの読み込み時に呼び出されます $(function() { orient(); }); //ユーザーが画面の向きを変更するときに呼び出されます $(window).on('orientationchange', function(e) { orient(); });これは携帯電話の方向を監視しています。ただし、APP は水平方向に開くため、通常はこれを検出することができません。その前提条件として、携帯電話の自動回転がオンになっている必要があります。したがって、上記の方法は放棄されました。
スマートな方法は放棄されたため、最も安価な方法は画面の幅と高さを監視することです。高さが幅よりも大きい場合、電話機はデフォルトで垂直画面状態になります。幅が高さよりも大きい場合、電話機は水平画面状態であると見なされます。 (もちろん、これにも制限がありますが、新しいアプリが横画面と縦画面の問題を解決したことを考慮して、ここではそれを実行します)。画面が縦向きモードの場合は何もする必要はありません。ただし、横向きモードでは、ページを 90 度回転する必要があります。早速、コードを直接見てみましょう。
//CSS3 回転を使用してルート コンテナを反時計回りに 90 度回転させ、ユーザーに垂直方向に表示するように強制します var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getElementsByTagName(body)[0]、$wrapper = document.getElementById(vue)、style = if(width <= ; height) { // 横画面 // style += width: + width + px; // 回転後の幅と高さの切り替えに注意 // style += height: + height + px;;// style += -webkit- 変換: 回転(0); 変換: 回転(0);;// スタイル += -webkit-transform-origin: 0 0;;// スタイル += 変換原点: 0 0;;フォントサイズ : + (幅* 100 / 1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = font-size: + (width * 100 / 1125) + px; // 縦方向のスタイル + = 幅: + 高さ + ピクセル;; 最小高さ: + 幅 + ピクセル;; -webkit-transform:回転(-90度); 変換:回転(-90度); //回転中点スタイルの扱いに注意 += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; スタイル += 変換元: + 高さ / 2 + ピクセル + (高さ / 2) + ピクセル; // スタイル += フォントサイズ: + 高さ * 100 / 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html); style.cssText = フォントサイズ: + 高さ * 100 / 1125 + ピクセル +オーバーフロー-y:+非表示;+高さ:+高さ+px;; スタイル += オーバーフロー-y: 非表示;; $wrapper.style.cssText = スタイル; } }window.onresize = detectOrient;detectOrient() ;関数 add_tab(){ var clone_tab = $(footer).clone(); $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab); clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left) :自動、上:0、幅:11.25レム、高さ:1.77レム})}フロントエンド担当者にとっては難しいコードではないと思いますが、注意点が3つあります。
最初のポイント:
最初は便宜上 HTML 全体を直接回転させていましたが、このとき問題が発生します。つまり、ページ内で固定配置された要素の配置が機能しません (コード内の <footer> が として配置されます)。タブスイッチ。一番下); これを変更する必要があります。親要素を回転させると子要素は機能しないため、親要素を回転させる必要はなく、その兄弟要素を直接回転させるだけです。ページ上の他のすべてのコンテンツはこの div にあるため、ここでは #vue という要素を回転させています。そこで要素を回転させてみました。この時点では位置決めを使用できますが、スタイルが間違っているため、add_tab 関数でこの要素のサイズとスタイルを調整して、通常どおり画面の右側、つまり縦向きに表示できるようにします。モード、画面の下部。
2 番目のポイント:
2つ目の注意点は、remレイアウトを使用しているため、htmlのフォントサイズを変更しますが、このとき注意してください。回転すると、幅が高さになり、高さが幅になります。ルートディレクトリのフォントサイズを計算するには高さを使用する必要があります。
3 番目のポイント:
3 番目の点は、回転の中心に注意する必要があります。デフォルトの回転の中心は、選択した要素の中心点です。次に、回転の中心点を変更したいと思います。回転後、HTML を overflow-y:hidden する必要もあります。そうしないと、不必要なスクロールが発生します。
この場合、基本的にページ全体が回転され、下部に固定配置された要素が正常に再配置されます。幸いなことに、私たちが使用するポップアップ ウィンドウは、layui のポップアップ ウィンドウであり、ポップアップ ウィンドウを 90 度回転できます。
ps: 最後に、ページが十分に長い場合、つまりスクロール バーがある場合、ポップアップ ウィンドウが出た後、マスク レイヤーをその後ろにスライドさせると、次のウィンドウが表示されなくなるという問題が見つかりました。ページが上にスライドします。本来は上記の記事で固定配置で解決できたのですが、回転のせいで失敗したので良い方法がありません。ポートレートモードでは問題ありません。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。