H5移动端强制横屏

H5移动端强制横屏

月光魔力鸭

2021-09-27 14:37 阅读 364 喜欢 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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
今天小程序上传体验版本后莫名无法获取用户数据,但是本地开发环境是正常的,通过开发工具的真机进行测试也正常,但是通过开发工具的预览又不正常,初步来看代码是没有问题的,可能是哪里设置有问题。
我们经常会有判断一个数值是素数的需求,那么我们如何来实现呢?
业务中有一段涉及到处理canvas的图片然后将内容进行上传,后测试发现在IE中不好使哎...
新增需求:在tinymce上增加一个着重号的插件
最近折腾的少了,实在没的写了,大约三四个月没更新了,先水一篇。
在我们通过canvs画图的时候经常会用到圆,且需要计算出圆上某点的坐标,由于我数学没学好,总是记不得怎么获取,这里记录下,加深记忆
前端时间搞了个小转码,放在后台,但是特别占带宽,想着能不能从前台把这个事搞定呢?读取图片的二进制,然后将字节流处理后重新生成图片展示处理啊。
web网站上总会有在文本域中提交代码的操作,那么如何处理呢?