如果想始终横屏展示给用户,方法有很多,我也来写几种吧:
1.简单粗暴型:当ipad竖屏的时候,给一个蒙层提示,让客户不得不进行横屏操作
// ipad竖屏适配
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight
if( width >= height ){
$('.ipad_t').hide(); //横屏--隐藏蒙层
}
else{
$('.ipad_t').show(); //竖屏--弹出蒙层
}
}
window.onresize = detectOrient;
detectOrient();
备注:这种方式虽然不是太友好,但简单有效,适当选择!
2.友好型:当ipad竖屏的时候,对根wrap进行旋转操作
// ipad竖屏适配
var detectOrient = function() {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrapper = document.getElementById("J_wrapper"),
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;";
}
else{
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
备注:这种方式有个大坑,由于对根wrap使用了transform,所以,如果其子元素用fixed定位的话,会使fixed属性失效(虽然fixed属性很顽强,但是一物降一物啊--父元素有transform的时候fixed会失效)
3.这种是最完美的,就是严格意义上的适配,两套CSS,如果是竖屏的话用一套,横屏的话用另一套
@media screen and (orientation: portrait) {
/*竖屏 css*/
}
@media screen and (orientation: landscape) {
/*横屏 css*/
}
备注:这种开发成本高,但效果最有效