H5移动端强制横屏

H5移动端强制横屏

月光魔力鸭

2021-09-27 14:37 阅读 497 喜欢 0 强制横屏

当一些业务必须通过横屏来实现,但是又没有原生来做,只能通过h5的时候怎么办?

通过css的transform来实现旋转,不过旋转后的一些位置计算就需要重新调整了。 transform的 rotate 是通过中心点进行旋转的,可以计算出来需要移动的距离。

//获取当前宽高,计算,并旋转
var width = window.innerWidth,height = window.innerHeight;
if(width < height){
  var diff = height/2-width/2;
  document.body.style.width = height+'px';
  document.body.style.height = width+'px';
  document.body.style.transform='rotate(90deg) translate('+diff+'px,'+diff+'px)';
}
//绑定事件
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function () {
  setTimeout(function(){
    var width1 = window.innerWidth,height1 = window.innerHeight;
    if(width1<height1) {
      var diff1 = height1/2-width1/2;
      document.body.style.width = height1+'px';
      document.body.style.height = width1+'px';
      document.body.style.transform='rotate(90deg) translate('+diff1+'px,'+diff1+'px)';
    } else {
      document.body.style.width = '100%';
      document.body.style.height = '100%';
      document.body.style.transform='';
    }
  },400)

})

转载请注明出处: https://chrunlee.cn/article/h5-hrizontal-screen-in-js.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
通过修改数据库编码处理存储emoj表情导致的报错问题。
在开发过程中经常会碰到跨frame 去操作的需求,那么如何获得这个frame呢,这里写了一个工具类,用来通过name获得frame的jq对象
问题是由一个BUG引起的,功能中有使用国际化组件,用的是jquery.i18n,在chrome上、ff上都没有什么问题,问题出在了IE上。万恶的IE..
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。
今天刷codewars的题目的时候碰到一个通过js来实现字符串转base64的题目,base64虽然在js或nodejs中经常用,但是我还真没有仔细去看过原理以及如何实现,这回绕不过去了,赶紧找了找资料看了下。
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
在页面中不同的frame之间进行相互调用的话,我们可以通过frame获取对应的window然后进行调用,但是如果是浏览器不同的tab之间呢?
先记录下,不定哪天就查了..防止找不到或不全