判断屏幕状态
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();
});
这个就是在监测手机的方向。但是,这个还有一个前提就是手机必须打开了自动旋转才是可以的。所以上面的方法被抛弃了。一个比较高明的方法就是监测屏幕的宽度和高度。当高大于宽的时候,我们默认手机是竖屏的状态,当宽大于高的时候,我们认为是横屏的状态。是在横屏的状态下,我们就要把页面转动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定位的元素,定位就不管用了(代码中的
转载请注明来源网址:青锋建站-http://www.sjzphp.com/webdis/shuping_1866.html