踩坑 || ios横屏失效 || 横屏ios不生效问题的问题 || uniapp横屏兼容问题

介绍

1、关于使用uni-app写app调横竖屏事件打包后或真机环境下，横屏在安卓机上可以实现，但是在ios系统上无法横屏的问题。

方法一（不建议使用，含有一定的局限性）

1. 将需要横屏的页面利用旋转属性进行反向设置宽高，造成一种假横屏的效果。
2. 横屏的效果是可以实现，但是缺点是一些toast提示，弹框组件等需要同步转向。
3. 还有一个比较局限性的是，你的页面中不能有输入性的操作。因为输入会带动键盘事件，键盘事件出现的位置是没有旋转可调的。
4. 主要代码如下：

    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
    left: calc(-50vh + 50vw);
    top: calc(50vh - 50vw);

方法二（推荐使用：但需要更改部分样式）

1. 首先确定你需要横屏的组件页面是 .vue 还是 .nvue 的。
2. 如果是 .nvue 的情况按照一下修改配置即可

    1.在manifest.json 文件中 app-plus 下添加如下代码：
        "screenOrientation" : [
                    "portrait-primary",
                    "landscape-primary",
                    "portrait-secondary",
                    "landscape-secondary"
        ]
    2.在pages.json 文件中 globalStyle  添加 如下代码：
        "pageOrientation": "auto"
        
    3.在需要切换横竖屏的页面添加如下代码
        onLoad(){ 
            // #ifdef APP-PLUS
                plus.screen.lockOrientation('default'); 
            // #endif
        }
        onUnload(){
            // #ifdef APP-PLUS
                plus.screen.lockOrientation('portrait-primary'); 
            // #endif
        }
        
    详细操作见下图：

manifest.json 文件中：

pages.json 文件中：

3. 如果是 .vue 的情况，目前了解到的情况是将 .vue 格式文件 改写成 .nvue 按照如上配置即可。

总结

以上内容是本人在网上踩过很多坑，也是最后了解到的一个解决办法，可能还有其他更好用的解决方法。

如有其他方法或者见解，欢迎能够交流沟通一下。