html固定横屏

一个h5网页需要横屏展示，毕竟h5不能控制横竖屏，只能添加旋转去控制

经过不懈的百度，发现了可以监听浏览器resize和orientationchange方法和css的

@media screen and (orientation: portrait) 去控制

监听方法判断clientWidth和clientHeight的大小

后来由于各种原因吧，发现这种方式不太适用于这个的h5

想到可以使用css的计算属性，就不需要监听事件什么的了

像下面这样就可以了~

感兴趣的小伙伴可以尝试一下

#horiz {
  width: 100vw;
  height: 100vh;
}
@media screen and (orientation: portrait) {
  #horiz {
    transform: rotate(90deg);
    transform-origin: 50% 50%;
    width: 100vh;
    height: 100vw;
    position: fixed;
    top: calc((100vh - 100vw) / 2);
    left: calc((100vw - 100vh) / 2);
  }
}

喔对了，为什么要添加定位呢，因为旋转。

我实在没有找到，怎么去找旋转的点了，就只好把他定位在中间以后，再去根据中心点去旋转了

如果需要设置默认字号来做自适应适配

则再添加以下代码

html {
  font-size: calc(100 * (100vw / 1920));
}
@media screen and (orientation: portrait) {
  html{
    font-size: calc(100 * (100vh / 1920));
  }
}

顺便贴一下之前的方案（可以忽略）

btw, 如果有更好的方案 欢迎探讨