關(guān)于移動端頁面強制豎屏的方法
我要評論最近工作中寫了一個移動端的頁面，本來是沒什么的，但是有一個要求感覺很奇怪，從前也沒有遇到過，就是我寫的這個頁面需要放在一個APP中，但是這個APP是橫屏的，打開這個頁面的webview也是橫屏的（最新版的APP打開的時候是豎屏的webview），本來我們是用的rem布局，橫屏的狀態(tài)下也是沒有什么問題的，但是甲方希望在橫屏打開的時候強制這個頁面豎屏顯示。所以就有了下面一系列的操作了。
首先是判斷橫屏的狀態(tài)，使用的一下的代碼：
function orient() {
if(window.orientation == 90 || window.orientation == -90) {//橫屏
//ipad、iphone豎屏；Andriod橫屏
//$("body").attr("class", "landscape");
//orientation = 'landscape';
//alert("ipad、iphone豎屏；Andriod橫屏");
$("p").text("橫屏");
return false;
} else if(window.orientation == 0 || window.orientation == 180) {//豎屏
//ipad、iphone橫屏；Andriod豎屏
// $("body").attr("class", "portrait");
// orientation = 'portrait';
//alert("ipad、iphone橫屏；Andriod豎屏");
$("p").text("豎屏");
return false;
}
}
//頁面加載時調(diào)用
$(function() {
orient();
});
//用戶變化屏幕方向時調(diào)用
$(window).on('orientationchange', function(e) {
orient();
});
這個就是在監(jiān)測手機的方向。但是，因為打開的這個APP的時候就是橫屏打開的，多以這個是沒辦法監(jiān)測到的，而且這個還有一個前提就是手機必須打開了自動旋轉(zhuǎn)才是可以的。所以上面的方法被拋棄了。
既然智能的辦法被拋棄了，那就用最賤的辦法，就是監(jiān)測屏幕的寬度和高度。當(dāng)高大于寬的時候，我們默認(rèn)手機是豎屏的狀態(tài)，當(dāng)寬大于高的時候，我們認(rèn)為是橫屏的狀態(tài)。（當(dāng)然了這個也是有局限的，但是考慮到新的APP中已經(jīng)把橫豎屏的問題解決了，這里就姑且這么做了）。當(dāng)豎屏的狀態(tài)我們是不需要做什么的。但是在橫屏的狀態(tài)下，我們就要把頁面轉(zhuǎn)動90度了。廢話不多說，直接看代碼：
// 利用 CSS3 旋轉(zhuǎn) 對根容器逆時針旋轉(zhuǎn) 90 度 強制用戶進行豎屏顯示
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) { // 橫屏
// style += "width:" + width + "px;"; // 注意旋轉(zhuǎn)后的寬高切換
// 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 { // 豎屏
style += "width:" + height + "px;";
style += "min-height:" + width + "px;";
style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
// 注意旋轉(zhuǎn)中點的處理
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":"auto","top":"0","width":"11.25rem","height":"1.77rem"})
}
相信這段代碼對于前端人員來說不是很難，但是有一點需要注意的有三點。
第一點：
最開始的時候我是為了方便直接旋轉(zhuǎn)的整個的html，這個是時候會有一個問題，就是頁面中的fixed定位的元素，定位就不管用了（代碼中的<footer>就是作為tab切換放在底部的）；這個就需要我們更改了，既然旋轉(zhuǎn)父元素，子元素就不管用了，那我們就不要旋轉(zhuǎn)父元素了，直接旋轉(zhuǎn)他的兄弟元素就可以了。我這里是旋轉(zhuǎn)的一個叫做#vue的元素，因為我的頁面中的其他的內(nèi)容全部是在這個div當(dāng)中的。所以我就旋轉(zhuǎn)了這個元素。然后這個時候定位是可以用的，但是樣式不對，所以在我的add_tab這個函數(shù)中就是在調(diào)整這個元素的大小和樣式，讓他能正常的顯示在屏幕的右側(cè)，也就是豎屏的狀態(tài)下，屏幕的底端。
第二點：
第二點需要注意的是，應(yīng)為我用的是rem布局，多以我會更改html的font-size，但是這個時候就要小心了，當(dāng)我們旋轉(zhuǎn)過來之后，寬變成了高，高變成了寬，所以我們需要用height來計算根目錄的字體大小。
第三點：
第三點就是在程序中注明的，需要我們注意旋轉(zhuǎn)的中心，默認(rèn)的旋轉(zhuǎn)中心是在所選元素的中心點。多以我們要改變旋轉(zhuǎn)的中心點。旋轉(zhuǎn)之后還要把html的overflow-y：hidden。否則就會出現(xiàn)多余的滾動。
這樣的話，基本上就把整個頁面旋轉(zhuǎn)過來了，并且把底部的fixed定位的元素再次定位成功了。比較幸運的是我們用的彈窗是用的layui的彈窗，再把這個彈窗旋轉(zhuǎn)90度就可以了。
ps：最后發(fā)現(xiàn)一點問題是沒辦法解決的，就是當(dāng)頁面夠長的時候，也就是有滾動條的時候，彈窗出來以后，滑動后面的遮罩層的話，后面的頁面會向上滑動。這個本來是可以解決的，我上面的這個文章就是利用fixed定位解決的，但是因為旋轉(zhuǎn)了，這個失效了，所以就沒有好的辦法了。在豎屏狀態(tài)下是沒問題的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
15 個為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國外的一些網(wǎng)站)
今天的文章，我們將分享15個可以學(xué)習(xí)編程的網(wǎng)站，這些網(wǎng)站上提供了很多編程教程，圖書以及編程練習(xí)，希望對你有用2024-11-02- 這篇文章主要介紹了web開發(fā)中的長度單位主要包括px,pt，em等,需要的朋友可以參考下2023-08-06
網(wǎng)頁前端開發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對單位，一般用于pc端網(wǎng)頁開發(fā),因為是絕對單位所以在移動端上的使用體驗并不是很好,rem它是描述相對于當(dāng)前根元素字體尺寸，是相對單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮，各有優(yōu)點，選擇適合的壓縮工具為將來做項目開發(fā)使用是一件很重要的事情??！在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21- 瀏覽器是多進程的，有瀏覽器主進程，網(wǎng)絡(luò)進程，渲染進程，插件進程等，在將html，css，javascript解析成一個頁面的時候，就需要多個進程的分工合作2023-05-01
- 本文為大家整理了常用的文件對應(yīng)的MIME類型，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁中使用Unicode字符的介紹(&#,\u等)
國際組織制定了可以容納世界上所有文字和符號的字符編碼方案，稱為Unicode，是通用字符集Universal Character Set的縮寫，用以滿足跨語言、跨平臺進行文本轉(zhuǎn)換、處理的要求2021-11-27前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-12-02
這篇文章主要介紹了告別硬編碼讓你的前端表格自動計算,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-27
