モバイルページで縦画面を強制する方法

モバイルページで縦画面を強制する方法

最近、仕事でモバイルページを作成しました。もともと特別なことではありませんでしたが、非常に奇妙に感じ、これまでに遭遇したことのない要件がありました。つまり、作成したページをアプリに配置する必要がありますが、このアプリは横長モードで、このページを開く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 ソリューション

推薦する

シャドウソックスを使用してLAN透過ゲートウェイを構築する

目次dnsmasq をインストールして設定するChinaDNS をインストールして設定するshado...

React setStateデータ更新メカニズムの詳細な説明

目次setStateを使用する理由setStateの使用法非同期または同期更新要約するsetStat...

MySQLクエリ結果をCSVにエクスポートする方法

MySQL クエリ結果をcsvにエクスポートするには、通常、php を使用して mysql に接続し...

さまざまな環境での Docker Compose のインストール方法

1. オンラインインストール現在、Linux x86アーキテクチャのオンラインインストールのみを試し...

Vue 円形パーセンテージ プログレスバー コンポーネントの機能の実装

必要な方はどなたでも参考にしてください。試してみて問題が見つかった場合は、メッセージを残してお知らせ...

MySQL 8.0.11 の新機能の紹介

MySQL 8.0 for Windows v8.0.11 公式無料バージョン 64 ビット1. デ...

CSSの固定位置属性の詳細な説明

モバイル アプリを開発する場合、Web サイトが特定の高さまでスクロールしたときにコンテンツの一部を...

CSS3のtext-fill-colorプロパティの詳細な説明

text-fill-color とは何を意味しますか?文字通りの意味から言えば、「テキストの塗りつぶ...

HTML の POST リクエストにおける a タグの 2 つの使用法の分析

HTML POST リクエストで a タグを使用する 2 つの例を次に示します。 1. ajaxを使...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

メニューノードのすべての子ノードを再帰的に検索する MySQL メソッド

背景プロジェクトにはメニューノードのすべてのノードをチェックする要件があります。オンラインでチェック...

Ubuntu 18.04にPython仮想環境をインストールする

Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...

読めばわかるVueの8つのヒント

1. v-forでは常に:keyを使用するデータを操作する必要があるときにプログラムを一定かつ予測可...