移动端如何强制页面横屏

背景

最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应say hello的tip,要求横屏显示,不能竖屏。

然而当用户竖屏打开时,而且没开启手机里的横屏模式,还要逼用户去开启。这时候用户早就不耐烦的把你的游戏关掉了。

而且有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。

解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

纯css

把main这个div在竖屏模式下横过来,横屏状态下不变。

@media screen and (orientation: portrait) {
    .main {
        -webkit-transform:rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        width: 100vh;
        height: 100vh;
        /*去掉overflow 微信显示正常,但是浏览器有问题,竖屏时强制横屏缩小*/
        overflow: hidden;
    }
}

@media screen and (orientation: landscape) {
    .main {
        -webkit-transform:rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }
}

但是有个问题是在横屏模式下,利用css旋转90度后,宽和高不好控制。

width: 100vh;
height: 100vh;

这样控制宽高不太适合单屏宽高的页面。

js计算宽高、对齐、旋转

上文提到了,在portrait下,旋转到横屏后宽和高会有问题。可以通过下面的js来实现。

var width = document.documentElement.clientWidth;
var height =  document.documentElement.clientHeight;
if( width < height ){
  $print =  $(‘#print‘);
  $print.width(height);
  $print.height(width);
  $print.css(‘top‘,  (height-width)/2);
  $print.css(‘left‘,  0-(height-width)/2 );
  $print.css(‘transform‘ , ‘rotate(90deg)‘);
  $print.css(‘transform-origin‘ , ‘50% 50%‘);
}

需要注意的是transform-origin是50% 50%,旋转90deg后,还需要重新设置top和left将其对齐。

最终方案

如果用户手机的旋转屏幕按钮开着,那么当手机横过来之后,上面的代码还是有问题。

var evt = "onorientationchange" in window ? "orientationchange" : "resize";

    window.addEventListener(evt, function() {
        console.log(evt);
        var width = document.documentElement.clientWidth;
         var height =  document.documentElement.clientHeight;
          $print =  $(‘#print‘);
         if( width > height ){

            $print.width(width);
            $print.height(height);
            $print.css(‘top‘,  0 );
            $print.css(‘left‘,  0 );
            $print.css(‘transform‘ , ‘none‘);
            $print.css(‘transform-origin‘ , ‘50% 50%‘);
         }
         else{
            $print.width(height);
            $print.height(width);
            $print.css(‘top‘,  (height-width)/2 );
            $print.css(‘left‘,  0-(height-width)/2 );
            $print.css(‘transform‘ , ‘rotate(90deg)‘);
            $print.css(‘transform-origin‘ , ‘50% 50%‘);
         }

    }, false);

完整代码

/**
 * 横竖屏
 * @param {Object}
 */
function changeOrientation($print) {
  var width = document.documentElement.clientWidth;
  var height =  document.documentElement.clientHeight;
  if(width < height) {
      $print.width(height);
      $print.height(width);
      $print.css(‘top‘,  (height - width) / 2 );
      $print.css(‘left‘,  0 - (height - width) / 2 );
      $print.css(‘transform‘, ‘rotate(90deg)‘);
      $print.css(‘transform-origin‘, ‘50% 50%‘);
  } 

  var evt = "onorientationchange" in window ? "orientationchange" : "resize";

      window.addEventListener(evt, function() {

      setTimeout(function() {
          var width = document.documentElement.clientWidth;
          var height =  document.documentElement.clientHeight;
          // 刷新城市的宽度
          initCityWidth();
          // 初始化每个气泡和自行车碰撞的距离
          cityCrashDistanceArr = initCityCrashDistance();

        if( width > height ){
            $print.width(width);
            $print.height(height);
            $print.css(‘top‘,  0 );
            $print.css(‘left‘,  0 );
            $print.css(‘transform‘ , ‘none‘);
            $print.css(‘transform-origin‘ , ‘50% 50%‘);
         }
         else {
          $print.width(height);
            $print.height(width);
            $print.css(‘top‘,  (height-width)/2 );
            $print.css(‘left‘,  0-(height-width)/2 );
            $print.css(‘transform‘ , ‘rotate(90deg)‘);
            $print.css(‘transform-origin‘ , ‘50% 50%‘);
         }
    }, 300);
   }, false);
}

总结

  • 该方案只适合页面宽高占一屏,不适合可以滚动的方案
  • 用orientationchange和resize监听横竖屏切换会有延迟的问题,具体解决延迟的方案见我的另外一篇文章js实现手机横竖屏事件

参考资料

demo

代码

代码

https://github.com/zuopf769/notebook/blob/master/fe/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%A6%82%E4%BD%95%E5%BC%BA%E5%88%B6%E9%A1%B5%E9%9D%A2%E6%A8%AA%E5%B1%8F/README.md

时间: 2024-10-10 02:32:35

移动端如何强制页面横屏的相关文章

移动端网站提升页面加载性能的优化技巧

移动端网站提升页面加载性能的优化技巧 收藏到:1时间:2015-06-17   文章来源:马海祥博客   访问次数:2501 网页性能的优化一直是网站成功的关键,越来越多的研究证明,不管是小型电商,还是大型连锁企业,即使是页面加载时间方面的细微改善,都可以带来更多的业务,更多的广告收入,更多的用户粘性和更多的客户满意度. 在过去几年,Web开发者都是基于改善硬件或者提高带宽速度来优化用户体验,但是最近几年,爆炸式的移动Web浏览器的使用打破了这个途径,低带宽,高延迟,小内存,低处理器性能的移动设

Web端控件,页面传值

一.记忆Web端控件需要配合HTML 中的Form表单元素 Label - 在HTML中被编译成<span> Literal - 在HTML中被编译成空 文本类 文本框      <input type="text">                        TextBox 密码框      <input type="password">                 TextBox 属性TextMode="pa

IOS 应用中从竖屏模式强制转换为横屏模式

在 iPhone 应用里,有时我们想强行把显示模式从纵屏改为横屏(反之亦然),CocoaChina 会员 "alienblue" 为我们提供了两种思路 第一种:通过人为的办法改变view.transform的属性. 具体办法: view.transform一般是View的旋转,拉伸移动等属性,类似view.layer.transform,区别在于View.transform是二维的,也就是使用仿射的办法通常就是带有前缀CGAffineTransform的类(可以到API文档里面搜索这个

嵌套移动APP端的H5页面meta标签

嵌套移动APP端的H5页面meta标签小结: <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <meta name="apple-mobile-web-app-capable" con

(转)Android强制设置横屏或竖屏

全屏 在Activity的onCreate方法中的setContentView(myview)调用之前添加下面代码 requestWindowFeature(Window.FEATURE_NO_TITLE);//隐藏标题 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏 横屏 按照下面代码示例修改Activity的o

前端-强制页面不缓存

有两种方式强制页面不缓存: 1.手动添加版本号 <link rel="stylesheet" type="text/css" href="/css/user.css?v=201806251715" /> <script src="/js/userinfo.js?v=201906223715"></script> 2.添加meta标签 <meta http-equiv="Cac

移动端如何让页面强制横屏

求横屏显示,不能竖屏.有经验的你肯定知道,当用户竖屏打开时,提示说你要把手机转过来是在是件很傻×的事情.这时如果用户没开启手机里的横屏模式,还要逼用户去开启.这时候用户早就不耐烦的把你的游戏关掉了.那么现在的解决办法,就是在竖屏模式下,写一个横屏的div,然后把它转过来. 代码如下: <body class="webpBack"> <div id="print"> <p>lol</p> </div> <

移动端-新建空白页面meta各个标签详细解读

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> meta标签 <meta name="viewport" content="width=device-width, i

05-19Web端控件,页面传值

一.记忆Web端控件需要配合HTML 中的Form表单元素 1.Label 会被编译成span标签 属性: Text:文本内容 CssClass:CSS样式 Enlabled:是否可用 Visible:是否可见 2.Literal 空的,C#会把里面的Text内容直接作为网页代码传过去,比如Text里面写上<input type="button" />会直接在网页中插入一个按钮 属性: Text:内容 文本类 文本框      <input type="te