移动端强制全屏和横竖屏

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

<!-- 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%');
 }