移动端页面样式如果是横屏时就乱了,如何通过前端的方法禁止横屏,还有移动端页面强制全屏如何实现,不妨试试这些。
<!-- UC强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
有些浏览器不识别meta标签实现横竖屏,不妨试试下方思路:
css辅助:
@media screen and (orientation: portrait) {
//....竖屏
}
@media screen and (orientation: landscape) {
//....横屏
}
js为主:
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if( width < height ){/*横屏*/
console.log(width + " " + height);
$mainWrap = $('#mainWrap');
$mainWrap.width(height);
$mainWrap.height(width);
$mainWrap.css('top', (height-width)/2 );
$mainWrap.css('left', (height-width)/2 );
$mainWrap.css('transform' , 'rotate(90deg)');
$mainWrap.css('transform-origin' , '50% 50%');
}