移动端如何强制页面横屏

时间: 2017-12-20阅读: 2981标签: 移动端

背景

最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行,碰到某个国家的地标就弹出该国的相应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实现手机横竖屏事件
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/263

关闭

vconsole_移动端h5开启控制台的实现

开发内嵌在 web,可能会遇到意想不到的 bug,所以你需要你能在手机上查看的控制台。前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试。

整理经常在H5移动端开发遇到的知识

viewport、强制浏览器全屏、IOS的Web APP模式、可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈),本篇文章主要是讲一些其他的或者优化手段。内容不多

移动端适配必须掌握的基本概念和适配方案

随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着多分辨率适配的问题

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

阻止移动端浏览器点击图片会预览的几种方法

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现:在img元素上添加 onclick=return false、背景图的方式插入、使用js事件阻止默认行为的方式

解决移动端禁止双指缩放功能

在实际开发中,我们禁止缩放的实现方式meta设置,user-scalabel=no或者user-scalabel=yes(yes是可以缩放,no或者0是不能缩放),在ios10以上的系统中,并不支持meta标签,需要我们通过脚本实现

移动端事件穿透的原理与解决方案

解决事件穿透还有通过设置动画过渡延迟元素消失等方法,由于这类方法影响用户体验,不一一介绍。在实际项目开发中,纯移动端项目优先推荐禁用 click 事件的方法,多端项目优先推荐禁用 touch 事件的方法

解决移动端1px边框最好的方法

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。

移动端300ms延迟的解决方法

移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。

总结几个移动端H5软键盘的大坑

部分机型软键盘弹起挡住原来的视图解决方法:可以通过监听移动端软键盘弹起,Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。参数如下。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!