如何使页面横屏

方法一,提示蒙层提醒用户保持竖屏体验,这种方法体验太差

 

方法二,强制横屏显示,对屏幕 resize 事件进行监听,当判断为竖屏时将整个根容器进行逆时针 CSS3 旋转 90 度即可,代码如下所示。 这种方法可以解决绝大多数问题了。

// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
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();



来源:https://aotu.io/notes/2017/10/18/landscape_mode_in_html5_game/

随机推荐
ThinkPHP 5.0 原生查询分页
十大编程算法
macOS 截图图片格式改成 jpg格式
Javascript游戏中的“透视”
白无常「两小时」
thinkphp5 r4分页类传入参数
npx 是什么?
理解MVC,MVP和MVVM设计模式
Wordpress 增加文章阅读次数或点赞次数(非插件实现)
RESTful API 设计指南