移动端强制全屏和横竖屏

2020-08-05117次阅读IOS其它html5

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

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

 

上一篇: cross-env跨平台地设置及使用环境变量的工具  下一篇: 移动端常用meta开箱即用  

移动端强制全屏和横竖屏相关文章