小編給大家分享一下Android中如何實(shí)現(xiàn)移動(dòng)端頁面強(qiáng)制豎屏，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的大冶網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

最近工作中寫了一個(gè)移動(dòng)端的頁面，本來是沒什么的，但是有一個(gè)要求感覺很奇怪，從前也沒有遇到過，就是我寫的這個(gè)頁面需要放在一個(gè)APP中，但是這個(gè)APP是橫屏的，打開這個(gè)頁面的webview也是橫屏的（最新版的APP打開的時(shí)候是豎屏的webview），本來我們是用的rem布局，橫屏的狀態(tài)下也是沒有什么問題的，但是甲方希望在橫屏打開的時(shí)候強(qiáng)制這個(gè)頁面豎屏顯示。所以就有了下面一系列的操作了。

首先是判斷橫屏的狀態(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;
            }
        }
        //頁面加載時(shí)調(diào)用
        $(function() {
            orient();
        });
        //用戶變化屏幕方向時(shí)調(diào)用
        $(window).on('orientationchange', function(e) {
            
            orient();
            
        });

這個(gè)就是在監(jiān)測(cè)手機(jī)的方向。但是，因?yàn)榇蜷_的這個(gè)APP的時(shí)候就是橫屏打開的，多以這個(gè)是沒辦法監(jiān)測(cè)到的，而且這個(gè)還有一個(gè)前提就是手機(jī)必須打開了自動(dòng)旋轉(zhuǎn)才是可以的。所以上面的方法被拋棄了。

既然智能的辦法被拋棄了，那就用最賤的辦法，就是監(jiān)測(cè)屏幕的寬度和高度。當(dāng)高大于寬的時(shí)候，我們默認(rèn)手機(jī)是豎屏的狀態(tài)，當(dāng)寬大于高的時(shí)候，我們認(rèn)為是橫屏的狀態(tài)。（當(dāng)然了這個(gè)也是有局限的，但是考慮到新的APP中已經(jīng)把橫豎屏的問題解決了，這里就姑且這么做了）。當(dāng)豎屏的狀態(tài)我們是不需要做什么的。但是在橫屏的狀態(tài)下，我們就要把頁面轉(zhuǎn)動(dòng)90度了。廢話不多說，直接看代碼：

// 利用 CSS3 旋轉(zhuǎn) 對(duì)根容器逆時(shí)針旋轉(zhuǎn) 90 度 強(qiáng)制用戶進(jìn)行豎屏顯示
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)中點(diǎ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"})
}

相信這段代碼對(duì)于前端人員來說不是很難，但是有一點(diǎn)需要注意的有三點(diǎn)。

第一點(diǎn)：

最開始的時(shí)候我是為了方便直接旋轉(zhuǎn)的整個(gè)的html，這個(gè)是時(shí)候會(huì)有一個(gè)問題，就是頁面中的fixed定位的元素，定位就不管用了（代碼中的<footer>就是作為tab切換放在底部的）；這個(gè)就需要我們更改了，既然旋轉(zhuǎn)父元素，子元素就不管用了，那我們就不要旋轉(zhuǎn)父元素了，直接旋轉(zhuǎn)他的兄弟元素就可以了。我這里是旋轉(zhuǎn)的一個(gè)叫做#vue的元素，因?yàn)槲业捻撁嬷械钠渌膬?nèi)容全部是在這個(gè)div當(dāng)中的。所以我就旋轉(zhuǎn)了這個(gè)元素。然后這個(gè)時(shí)候定位是可以用的，但是樣式不對(duì)，所以在我的add_tab這個(gè)函數(shù)中就是在調(diào)整這個(gè)元素的大小和樣式，讓他能正常的顯示在屏幕的右側(cè)，也就是豎屏的狀態(tài)下，屏幕的底端。

第二點(diǎn)：

第二點(diǎn)需要注意的是，應(yīng)為我用的是rem布局，多以我會(huì)更改html的font-size，但是這個(gè)時(shí)候就要小心了，當(dāng)我們旋轉(zhuǎn)過來之后，寬變成了高，高變成了寬，所以我們需要用height來計(jì)算根目錄的字體大小。

第三點(diǎn)：

第三點(diǎn)就是在程序中注明的，需要我們注意旋轉(zhuǎn)的中心，默認(rèn)的旋轉(zhuǎn)中心是在所選元素的中心點(diǎn)。多以我們要改變旋轉(zhuǎn)的中心點(diǎn)。旋轉(zhuǎn)之后還要把html的overflow-y：hidden。否則就會(huì)出現(xiàn)多余的滾動(dòng)。

這樣的話，基本上就把整個(gè)頁面旋轉(zhuǎn)過來了，并且把底部的fixed定位的元素再次定位成功了。比較幸運(yùn)的是我們用的彈窗是用的layui的彈窗，再把這個(gè)彈窗旋轉(zhuǎn)90度就可以了。

ps：最后發(fā)現(xiàn)一點(diǎn)問題是沒辦法解決的，就是當(dāng)頁面夠長(zhǎng)的時(shí)候，也就是有滾動(dòng)條的時(shí)候，彈窗出來以后，滑動(dòng)后面的遮罩層的話，后面的頁面會(huì)向上滑動(dòng)。這個(gè)本來是可以解決的，我上面的這個(gè)文章就是利用fixed定位解決的，但是因?yàn)樾D(zhuǎn)了，這個(gè)失效了，所以就沒有好的辦法了。在豎屏狀態(tài)下是沒問題的。

以上是“Android中如何實(shí)現(xiàn)移動(dòng)端頁面強(qiáng)制豎屏”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：Android中如何實(shí)現(xiàn)移動(dòng)端頁面強(qiáng)制豎屏
文章來源：http://sd-ha.com/article18/jgeogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站建設(shè)、營(yíng)銷型網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、移動(dòng)網(wǎng)站建設(shè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)