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

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

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

推薦する

タイムスタンプの差を計算するSQLメソッド

タイムスタンプの差を計算するSQLメソッド概要場合によっては、特定のレコードを時間で検索する必要があ...

Vue で手ぶれ補正とスロットリングを使用する方法

目次序文コンセプト安定意味使用シナリオコードVueでの使用スロットリング意味使用シナリオコードVue...

JavaScript における Promise の詳細な説明

目次Promise の基本的な使用法: 1. Promiseオブジェクトを作成する2. プロミス方式...

圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法

JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...

MySQL 8.0.12 winx64 解凍バージョンのインストール グラフィック チュートリアル

mysql-8.0.12-winx64 解凍版のインストールを記録して、みんなで共有しました。 1....

UnityはMySQLに接続し、テーブルデータの実装コードを読み取ります

表は以下のとおりです。 Unity が読み取って呼び出すときのコード: データベース内の別のテーブル...

CentOS 7 で Python を 3.6.6 にアップグレードした後に発生する yum エラー問題の解決方法の概要

最近、テスト サーバーのオペレーティング システムを Cent0S 7.5 にアップグレードし、Py...

Docker コンテナの正常なシャットダウン前にトラップを使用して環境のクリーンアップを実行する

実行中のコンテナが終了したときに、コンテナが完全に終了する前に環境をクリーンアップするなど、いくつか...

el-table ヘッダーでテキストを折り返す 3 つの方法の詳細な説明

目次問題の説明レンダリング3種類のコード要約する問題の説明通常、表のヘッダーは折り返されませんが、ビ...

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

優れたユーザー エクスペリエンス デザイナーが行うべき 5 つのこと (画像とテキスト)

この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...

Linuxサーバーのファイアウォールを変更してポートへのリモートアクセスを許可する方法

1. 問題の説明セキュリティ上の理由から、新しく構築されたサーバー クラスターでは、指定されたポート...

Docker に ElasticSearch をインストールする方法を 1 つの記事で解説

目次序文1. Dockerをインストールする2. ElasticSearchをインストールする3. ...