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

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

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

推薦する

Tomcatのクラスロードメカニズムのプロセスとソースコード分析

目次序文1. Tomcat クラスローダー構造図: 2. Tomcat のクラスロードプロセスの説明...

PSを使用して2分でxhtml+cssウェブサイトのホームページを作成します

xhtml+css のウェブサイト再構築、ウェブ標準などについては、記事が多すぎるので繰り返しません...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

Centos8 システムの VMware インストール チュートリアル図 (中国語グラフィカル モード)

目次1. ソフトウェアとシステムイメージ2. 仮想マシンを作成する3. CentOS8をインストール...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

MySQLのマスタースレーブレプリケーションと読み取り書き込み分離を理解するための記事

目次導入1. MySQL マスタースレーブレプリケーション1. MySQLレプリケーションタイプ2....

Vue Element-ui フォーム検証ルールの実装

目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...

MySQL ソート機能の詳細

目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...

MySQL 5.7.13 ソースコードのコンパイル、インストール、および構成方法のグラフィックチュートリアル

インストール環境: CentOS7 64ビットMINI版公式ソースコードのコンパイルおよびインストー...

InnoDB テーブルの BLOB 列と TEXT 列のストレージ効率を最適化します。

まず、MySQL InnoDB エンジンのストレージ形式に関する重要なポイントをいくつか紹介します。...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

一目でわかる$nextTickの説明

目次1. 機能説明2. 親コンポーネント3. サブコンポーネント NextTick.vue 4なぜ未...

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

Tencent Cloud Server での Jenkins の設定方法の詳細

目次1. Tencent Cloud Serverに接続する2. 環境整備Jenkinsのデプロイメ...