手机微信页面横屏展示，可切换竖屏

最新推荐文章于 2023-12-29 16:11:20 发布

lan風

最新推荐文章于 2023-12-29 16:11:20 发布

阅读量1.1k

点赞数

分类专栏：小白码农文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_41967725/article/details/120311706

版权

为了在手机上方便查看excel表格数据，通过结合css和javascript实现了横屏查看功能。通过设置css样式、添加meta标签，以及编写js代码，可以实现横屏显示并提供切换模式。

摘要由CSDN通过智能技术生成

公司想在手机上查看excel表格的数据，希望能横屏查看

在百度搜寻后，决定使用css和js实现。

1.css样式代码

```/*横屏---------------*/
#screen-change{
   position:absolute;left:50%;top:50%;overflow:hidden;z-index:10}
#screen-change.w{
   height:100vw;width:100vh;transform:translate(-50%,-50%) rotate(90deg);-webkit-transform:translate(-50%,-50%) rotate(90deg)}
#screen-change.h{
   height:100vh;width:100vw;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%