uniapp 单页面横屏

// 屏幕旋转为横屏
            resizeScreen: function() {
                const _this = this;
                // 利用 CSS3 旋转 对根容器逆时针旋转 90 度
                const detectOrient = function() {
                    let width = document.documentElement.clientWidth,
                        height = document.documentElement.clientHeight,
                        $wrapper = _this.$refs.view, // 这里是页面最外层元素
                        style = "";
                    if (width >= height) {
                        // 横屏
                        style += "width:" + width + "px;"; // 注意旋转后的宽高切换
                        style += "height:" + height + "px;";
                        style += "-webkit-transform: rotate(0); transform: rotate(0);";
                        style += "-webkit-transform-origin: 0 0;";
                        style += "transform-origin: 0 0;";
                    } else {
                        // 竖屏
                        style += "width:" + height + "px;";
                        style += "height:" + width + "px;";
                        style +=
                            "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
                        // 注意旋转中点的处理
                        style +=
                            "-webkit-transform-origin: " +
                            width / 2 +
                            "px " +
                            width / 2 +
                            "px;";
                        style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                    }
                    // $wrapper.style.cssText = style;
                    document.getElementById("screen-view").style.cssText = style
                };
                window.onresize = detectOrient;
                detectOrient();
            },

注：若为app端 本方法不可行   此时采用另一种方法 亲测实用~

uniAPP实现单页面横竖屏切换_改昵称比敲代码难的博客-CSDN博客_uniapp 横屏uniAPP实现单页面横竖屏切换最近在用uniapp开发，发现官方文档只能全局配置横竖屏切换，找了些文档，最终实现了效果一、官方全局设置https://uniapp.dcloud.io/collocation/pages?id=globalstyle在pages.json中添加配置："globalStyle": { // ..."pageOrientation": "auto"},此方法可以配置全部页面横竖屏切换（切换时有rpx坑，尽量使用 百分比布局 和 pxhttps://blog.csdn.net/weixin_50880237/article/details/109848509

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！