手机html 横向全屏 移动端强制全屏和横竖屏

移动端页面样式如果是横屏时就乱了，如何通过前端的方法禁止横屏，还有移动端页面强制全屏如何实现，不妨试试这些。

有些浏览器不识别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%');

}