外形寸法図
最近、仕事で携帯ページを書いたのですが、何でもないのですが、非常に違和感があり、今まで遭遇したことのない要求がありました、それは、このページをAPPに配置する必要があると書いたのですが、APPが横長で、このページを開くウェブビューも横長（最新版のAPPはウェブビューが縦長の時に開く）、もともと でもこのページを横長に開いた時に強制的に縦に表示したいのです。そこで、以下のような一連の操作があります。
まず、以下のコードで、ランドスケープの状態を判断します。
function orient() {
if(window.orientation == 90 || window.orientation == -90) {// landscape
//ipad, iphone vertical; Andriod horizontal
//$("body").attr("class", "landscape");
//orientation = 'landscape';
//alert("ipad, iphone vertical; Andriod horizontal");
$("p").text("landscape");
return false;
} else if(window.orientation == 0 || window.orientation == 180) {//vertical screen
// ipad, iphone horizontal; Andriod vertical
// $("body").attr("class", "portrait");
// orientation = 'portrait';
//alert("ipad, iphone landscape; Andriod portrait");
$("p").text("portrait");
return false;
}
}
// Called when the page loads
$(function() {
orient();
});
// Called when the user changes the orientation of the screen
$(window).on('orientationchange', function(e) {
orientation();
});
これはスマホの向きを監視しているのです。しかし、アプリは横向きで開くため、これを監視する方法がなく、また、自動回転させるためにはスマホの電源を入れなければならないという前提があります。そこで、上記の方法は断念しました。
スマートな方法が捨てられたので、最も安価な方法は、画面の幅と高さを監視することです。高さが幅より大きいときは縦長画面、幅が高さより大きいときは横長画面をデフォルトとします。(もちろん、これも限定的ですが、新しいAPPが横画面と縦画面の問題を解決したことを考慮し、ここではそうすることにします）。縦画面状態のときは、何もする必要はありません。しかし、横画面の状態では、私たちはページを90度回転させる必要があります。さらに詳しく説明することなく、直接コードを見てみましょう。
// Use CSS3 rotation to rotate the root container 90 degrees counterclockwise to force the user to display the screen vertically
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
//$wrapper = document.getElementsByTagName("body")[0],
$wrapper = document.getElementById("vue"),
style = "";
if(width <= height) { // horizontal
// style += "width:" + width + "px;"; // note the width-height switch after rotation
// style += "height:" + height + "px;";
// style += "-webkit-transform: rotate(0); transform: rotate(0);";
// style += "-webkit-transform-origin: 0 0;";
// style += "transform-origin: 0 0;";
style += "font-size:" + (width * 100 / 1125) + "px";
var html_doc = document.getElementsByTagName("html")[0];
html_doc.style.cssText = "font-size:" + (width * 100 / 1125) + "px";
} else { // vertical screen
style += "width:" + height + "px;";
style += "min-height:" + width + "px;";
style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
// Note the handling of the rotation midpoint
style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
//style += "font-size:" + height * 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;";
style += "overflow-y: hidden;";
add_tab();
$wrapper.style.cssText = style;
}
}
window.onresize = detectOrient;
detectOrient();
function add_tab(){
var clone_tab = $("footer").clone();
$("footer").remove();
clone_tab.css({"transform":"rotate(-90deg)","transform-origin":"top right"})
$("body").append(clone_tab);
clone_tab.css({"position":"fixed","right":"1.77rem","bottom":"4rem","left","right":"1.77rem","right":"1.77rem","bottom":"4rem"," "left":"auto","top":"0","width":"11.25rem","height":" 1.77rem"})
}
このコードはフロントエンドの人にとって難しいものではないと思いますが、注意すべき点が3つあります。
1点目。
一番最初に便宜上html全体を直接回転させたのですが、この時に問題が発生します、つまりページ内の要素の固定位置、ポジショニングがうまくいかないのです(
<フッター コード内のタブスイッチとして下部に配置されている）、これは私たちが変更する必要があり、親要素の回転以来、子要素は動作しませんし、我々は親要素を回転させない 我々は、親要素を回転させないでください、その兄弟要素を直接回転させる必要があります。ここでは、#vueという要素を回転させています。なぜなら、私のページ内の他のコンテンツはすべてこのdivの中にあるからです。というのも、私のページの他のコンテンツはすべてこのdivの中にあるからです。そこで、この要素を回転させました。そこで、add_tab関数でこの要素のサイズとスタイルを調整し、画面の右側、つまり垂直な状態では画面の下に正しく表示されるようにしています。
2点目
2つ目の注意点は、remレイアウトを使うべきかというと、htmlのfont-sizeを変更することが多くなりますが、今回は注意が必要で、ローテーションオーバーすると、幅が高さになり、高さが幅になるので、ルートディレクトリのフォントサイズを計算するのに、高さを使う必要があるのです。
3点目
3点目は、プログラムで表示されているもので、回転の中心に注意を払う必要があり、デフォルトでは選択された要素の中心点になります。デフォルトの回転中心は、選択した要素の中心点です。多くの場合、回転中心を変更する必要があります。回転の後、htmlのoverflow-y: hiddenを記述する必要があります。そうしないと、冗長なスクロールが発生します。
これは基本的にページ全体を回転させ、一番下の固定位置の要素を再び配置するものです。幸いなことに、今回使用するポップアップはレイウイポップアップなので、これを90度回転させることができます。
追記：最後に、ページが長い場合、つまりスクロールバーがある場合、ポップアップウィンドウが出た後、マスクレイヤーの背面をスライドさせると、ページの背面がスライドアップする、という問題を解決する方法がないことがわかりました。これは、解決されている可能性が、上記の私の記事は、固定位置のソリューションの使用ですが、回転のために、これは失敗したので、良い方法はありません。縦画面の状態では問題ありません。
以上が今回の記事の内容ですが、皆様の学習のお役に立てれば幸いです。また、BinaryDevelopをより支持していただければ幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン