H5移动端强制横屏

H5移动端强制横屏

月光魔力鸭

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


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
最近折腾的少了,实在没的写了,大约三四个月没更新了,先水一篇。
对于web开发过程中的JS对象 Array ,我们真的充分使用了么?是不是理解了Array的全部?能够在合适的地点调用合适的函数,使用合适的属性?
通过修改数据库编码处理存储emoj表情导致的报错问题。
java 对象中有很多引用,甚至会出现循环引用,比如 user 对象中有 school 对象,school 对象中又有 user 对象,这样在对 user 对象序列化的时候,就会出现死循环,导致内存溢出。通过一定的方式,将每个对象增加ID 和 REF 引用标识最终可以解决这个问题
我们有时候会拿textarea来做编辑器,但是常用编辑器都是支持tab缩进的,这里对textarea监听下事件处理下即可实现。
web开发中,前台有时候会需要一个随机数或序列,通常来说,这个随机数可能只在当前页面中使用,并不需要太过严格,大体上重复率低即可。
最近做个nodejs的项目,使用了thinkjs 3.0 的框架,编辑器为vs code ,之前用的好好的,每次 . 后都有提示的,可是使用了多模块后发现.. model的提示没有了..
偶尔练习下canvas,这里简单记录下常用API,防止遗忘..加深记忆..努力提高..争取突破...daydayup