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

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

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

推薦する

MySQL における制限関数と合計関数の混在使用の問題の詳細な説明

序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

一般的な Nginx のテクニックと例の概要

1. 複数サーバーの優先順位たとえば、各サーバー ブロックがポート 80 をリッスンする場合、www...

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

nginx ウェブサイト サービスのアンチホットリンクを設定する方法 (推奨)

1. ホットリンクの原則1.1 Webページの準備Web ソース ホスト (192.168.153...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

DD DT DLタグの使用例

通常は <ul><li> タグを使用しますが、dd タグと dt タグも便利...

CSSは高さを設定せずにdivを完全に中央に配置することを実現します

必要とする本文の下のdivは垂直方向に中央揃えになっていますdiv 内のテキストを垂直中央に配置する...

MySQL で絵文字表現を挿入できない理由と解決策

失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...

chkconfig および systemctl コマンドを使用して Linux サービスを有効または無効にする方法

これは Linux 管理者にとって重要な (そして素晴らしい) トピックなので、誰もが Linux ...

jQuery キャンバスは QR コード付きのポスターを生成します

この記事では、jQuery キャンバスを使用して QR コード付きのポスターを生成するための具体的な...

美しい FLASH ウェブサイト デザイン例 50 選

Flashにより、デザイナーや開発者はブラウザ上でリッチなコンテンツを提供し、動き、インタラクティブ...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...