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

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

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

推薦する

Ubuntu 20.04にvncserverをインストールする方法

Ubuntu 20.04は2020年4月に正式にリリースされました。本日、ミラーシステムを正式にイン...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

CSS3 を使用した SVG パス ストロークのアニメーション化入門チュートリアル

JavaScript に依存せず、純粋な CSS を使用してsvgストローク描画アニメーション効果と...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

MySQL の 2 種類の一時テーブルの使用方法の詳細な説明

外部一時テーブルCREATE TEMPORARY TABLE によって作成された一時テーブルは、外部...

Nginx レイヤー 4 負荷分散構成ガイド

1. レイヤー4負荷分散の概要レイヤー 4 ロード バランシングとは何ですか?いわゆる 4 層負荷分...

ページのスクロールバーを無効にするには、overflow: hiddenを使用します。

コードをコピーコードは次のとおりです。 html {オーバーフロー: 非表示; }体{オーバーフロー...

Dockerはポートを介してコンテナに接続します

Dockerコンテナ接続1. ネットワークポートマッピングPythonアプリケーション用のコンテナを...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

Vue 開発者向けの VSCode 拡張機能ベスト 7

適切な VS Code 拡張機能を Visual Studio に追加すると、開発者としての作業がは...

SQL Server コメントのショートカット キー操作

SQL Server のバッチコメントバッチ注釈Ctrl + (K, C): Ctrlキーを押しなが...

使用場所によって混乱しやすいXHTMLタグ

<br />jb51.net では、常に記事のセマンティクスを重視してきましたが、HTM...

MySQL の concat 関数についての簡単な説明。MySQL でフィールドの前または後に文字列を追加する方法

MySQL で concat 関数を使用する方法: CONCAT(文字列1、文字列2、…)戻り値は、...

EChartsマルチチャート連携機能の実装プロセス

表示するデータが多い場合、1 つのチャートに表示しても効果はよくありません。このとき、2 つのチャー...