麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 網站 > 網頁設計 > 正文

關于移動端頁面強制豎屏的方法

2024-08-30 08:36:08
字體:
來源:轉載
供稿:網友

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

首先是判斷橫屏的狀態,使用的一下的代碼:

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;            }        }        //頁面加載時調用        $(function() {            orient();        });        //用戶變化屏幕方向時調用        $(window).on('orientationchange', function(e) {                        orient();                    });

這個就是在監測手機的方向。但是,因為打開的這個APP的時候就是橫屏打開的,多以這個是沒辦法監測到的,而且這個還有一個前提就是手機必須打開了自動旋轉才是可以的。所以上面的方法被拋棄了。

既然智能的辦法被拋棄了,那就用最賤的辦法,就是監測屏幕的寬度和高度。當高大于寬的時候,我們默認手機是豎屏的狀態,當寬大于高的時候,我們認為是橫屏的狀態。(當然了這個也是有局限的,但是考慮到新的APP中已經把橫豎屏的問題解決了,這里就姑且這么做了)。當豎屏的狀態我們是不需要做什么的。但是在橫屏的狀態下,我們就要把頁面轉動90度了。廢話不多說,直接看代碼:

// 利用 CSS3 旋轉 對根容器逆時針旋轉 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;"; // 注意旋轉后的寬高切換//        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);";        // 注意旋轉中點的處理        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"})}

相信這段代碼對于前端人員來說不是很難,但是有一點需要注意的有三點。

第一點:

最開始的時候我是為了方便直接旋轉的整個的html,這個是時候會有一個問題,就是頁面中的fixed定位的元素,定位就不管用了(代碼中的<footer>就是作為tab切換放在底部的);這個就需要我們更改了,既然旋轉父元素,子元素就不管用了,那我們就不要旋轉父元素了,直接旋轉他的兄弟元素就可以了。我這里是旋轉的一個叫做#vue的元素,因為我的頁面中的其他的內容全部是在這個div當中的。所以我就旋轉了這個元素。然后這個時候定位是可以用的,但是樣式不對,所以在我的add_tab這個函數中就是在調整這個元素的大小和樣式,讓他能正常的顯示在屏幕的右側,也就是豎屏的狀態下,屏幕的底端。

第二點:

第二點需要注意的是,應為我用的是rem布局,多以我會更改html的font-size,但是這個時候就要小心了,當我們旋轉過來之后,寬變成了高,高變成了寬,所以我們需要用height來計算根目錄的字體大小。

第三點:

第三點就是在程序中注明的,需要我們注意旋轉的中心,默認的旋轉中心是在所選元素的中心點。多以我們要改變旋轉的中心點。旋轉之后還要把html的overflow-y:hidden。否則就會出現多余的滾動。

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

ps:最后發現一點問題是沒辦法解決的,就是當頁面夠長的時候,也就是有滾動條的時候,彈窗出來以后,滑動后面的遮罩層的話,后面的頁面會向上滑動。這個本來是可以解決的,我上面的這個文章就是利用fixed定位解決的,但是因為旋轉了,這個失效了,所以就沒有好的辦法了。在豎屏狀態下是沒問題的。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 午夜视频中文字幕 | 国产小视频在线观看 | 黄色大片www | 日韩在线播放第一页 | 亚洲精品动漫在线观看 | 国产超碰人人做人人爱 | 二区三区在线观看 | 一区二区三区视频在线观看 | 91av在线影院 | 欧美成人一级 | 免费人成在线播放 | 久久久久国产精品久久久久 | 久久国产精品久久久久久 | 羞羞的视频免费在线观看 | 成人免费观看49www在线观看 | 日日狠狠久久偷偷四色综合免费 | 午夜在线视频观看 | 在线观看福利网站 | 久久91精品国产91久久yfo | 亚洲成人久久精品 | 操碰在线视频 | 久久91精品国产91久久yfo | 欧美精品一区二区中文字幕 | 免费a级毛片永久免费 | 日韩视频一区二区三区在线观看 | 国产999精品久久久久 | 欧美日韩专区国产精品 | 欧美高清一级片 | 欧美一级爱操视频 | h视频在线观看免费 | 国产精品99久久久久久董美香 | 精品久久久久久综合日本 | 黄色成年在线观看 | 免费毛片视频 | www.xxx视频| 99r国产精品 | 国产一级桃视频播放 | 亚洲综人网| 99麻豆久久久国产精品免费 | 日韩毛片一区二区三区 | 免费a级作爱片免费观看欧洲 |