近期工作中中写了1个挪动端网页页面，原本是没甚么的，可是有1个规定觉得很怪异，从前也沒有遇到过，便是我写的这个网页页面必须放在1个APP中，可是这个APP是横屏的，开启这个网页页面的webview也是横屏的（全新版的APP开启的情况下是竖屏的webview），原本大家是用的rem合理布局，横屏的情况下也是沒有甚么难题的，可是甲方期待在横屏开启的情况下强制性这个网页页面竖屏显示信息。因此就有了下面1系列的实际操作了。
最先是分辨横屏的情况，应用的1下的编码：
function orient() {
if(window.orientation == 90 || window.orientation == ⑼0) {//横屏
//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的情况下便是横屏开启的，多以这个是没法监测到的，并且这个也有1个前提条件便是手机上务必开启了全自动转动才是能够的。因此上面的方式被抛下了。
既然智能化的方法被抛下了，那就用最贱的方法，便是监测显示屏的宽度和高宽比。当伟岸于宽的情况下，大家默认设置手机上是竖屏的情况，当宽敞于高的情况下，大家觉得是横屏的情况。（自然了这个也是有局限的，可是考虑到到新的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(⑼0deg); transform: rotate(⑼0deg);";
// 留意转动中点的解决
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(⑼0deg)","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"})
}
坚信这段编码针对前端开发人员来讲并不是很难，可是有1点必须留意的有3点。
第1点：
最初的情况下我是以便便捷立即转动的全部的html，这个是情况下会有1个难题，便是网页页面中的fixed精准定位的元素，精准定位就无论用了（编码中的<footer>便是做为tab切换放在底部的）；这个就必须大家变更了，既然转动父元素，子元素就无论用了，那大家就不必转动父元素了，立即转动他的弟兄元素便可以了。我这里是转动的1个叫做#vue的元素，由于我的网页页面中的别的的內容所有是在这个div之中的。因此我就转动了这个元素。随后这个情况下精准定位是能够用的，可是款式不对，因此在我的add_tab这个涵数中便是在调剂这个元素的尺寸和款式，让他能一切正常的显示信息在显示屏的右边，也便是竖屏的情况下，显示屏的底端。
第2点：
第2点必须留意的是，应为我用的是rem合理布局，多以我会变更html的font-size，可是这个情况下就要当心了，当大家转动过来以后，宽变为了高，高变为了宽，因此大家必须用height来测算根文件目录的字体样式尺寸。
第3点：
第3点便是在程序流程中注明的，必须大家留意转动的管理中心，默认设置的转动管理中心是在所选元素的管理中心点。多以大家要更改转动的管理中心点。转动以后还要把html的overflow-y：hidden。不然就会出現过剩的翻转。
这样的话，基础上就把全部网页页面转动过来了，而且把底部的fixed精准定位的元素再度精准定位取得成功了。较为好运的是大家用的弹窗是用的layui的弹窗，再把这个弹窗转动90度便可以了。
ps：最终发现1点难题是没法处理的，便是当网页页面够长的情况下，也便是有翻转条的情况下，弹窗出来之后，拖动后边的遮罩层的话，后边的网页页面会向上拖动。这个原本是能够处理的，我上面的这个文章内容便是运用fixed精准定位处理的，可是由于转动了，这个无效了，因此就沒有好的方法了。在竖屏情况下是没难题的。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 制作小程序_小程序商城_扫码点餐小程序_微信小程序开店的步骤_牛刀小程序 版权所有 （网站地图） 粤ICP备10235580号