uniApp 调整小程序单个/全部界面横屏展示效果

今天药忘吃喽~ 2024-04-22 07:42 39阅读 0赞

我们打开uni项目 小程序端运行

默认是竖着的一个效果  
![在这里插入图片描述][fc19d94479c94098b7ade4cd72218117.png]  
我们打开项目的  
pages.json  
给需要横屏的界面 的 style 属性 加上

"mp-weixin": {
        
    	"pageOrientation": "landscape"
    }

![在这里插入图片描述][abd4767ec0b84a79abe83ece5c52d5d9.png]  
界面就横屏了  
![在这里插入图片描述][a6c23b1704cb41598f973cab3ff3c256.png]  
如果是要所有界面都横屏的话  
就直接在pages.json 的 globalStyle 中加上

"pageOrientation": "auto"

![在这里插入图片描述][97f40386a3084634be48fd30df2b6ae7.png]  
![在这里插入图片描述][70508e4f62b44ff5971590a8818c2d74.png]  
这样 就能实现全部横屏的效果

[fc19d94479c94098b7ade4cd72218117.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/f05127dbe21844ec9622f502f4d83399.png
[abd4767ec0b84a79abe83ece5c52d5d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e73c46624ac24fed847bacd9608db07c.png
[a6c23b1704cb41598f973cab3ff3c256.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/2f735026bdad41f6b51693595c9fe9b0.png
[97f40386a3084634be48fd30df2b6ae7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/a2aa81c0e0ad4fe4bbeb637ae119577d.png
[70508e4f62b44ff5971590a8818c2d74.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/3cb587d67d914e2bb364fcb8628f0d56.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniApp 调整小程序单个/全部界面横屏展示效果

就直接在pages.json 的 globalStyle 中加上。给需要横屏的界面的 style 属性加上。我们打开uni项目小程序端运行。这样就能实现全部横...

今天药忘吃喽~/ 2024年04月22日 07:42/ 0 赞/ 40 阅读

相关微信小程序开启横屏调试

给下面的 window 对象下面加一个 pageOrientation 属性值为 landscape。然后打开全局配置文件 app.json。开启真机运行目...

深碍√TFBOYSˉ_/ 2024年04月22日 07:35/ 0 赞/ 64 阅读

相关 HarmonyOS 横屏调试与真机横屏运行

在 abilities 下面第一个对象最下面加上。我们如下图找到 module.json5。我们有些程序需要横屏才能执行出效果。我们在预览器上点击如下图...

川长思鸟来/ 2024年04月22日 07:31/ 0 赞/ 66 阅读

相关 php强行横屏,强制横屏app

强制横屏app是一款专为手机用户打造的控制屏幕方向转动的软件。现在很多手机设备上面都有可以转动屏幕方向的设置，但是有一些手机还是没有添加这种功能，那么这个时候你就非常需要这款软

缺乏、安全感/ 2023年01月17日 10:52/ 0 赞/ 162 阅读

相关移动端H5强制页面横屏展示

接到一个H5小游戏的需求，需要强制H5横屏显示；大概效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

小咪咪/ 2022年12月27日 02:15/ 0 赞/ 674 阅读

相关 uniapp配置横屏启动

用uniapp开发横屏应用的时候，不想启动的时候是竖屏，启动完再设置成横屏，这样体验不好可以直接再page.json里面配置 page.json "pag

港控/mmm°/ 2022年10月16日 14:23/ 0 赞/ 396 阅读

相关横屏问题

移动端html开发，我们常会用到横竖屏的判断做一些事情，比如说播放视频的时候时常使用横竖屏切来切换居中显示和全屏显示，如果你无数次尝试都失败了，请你看到最后，有惊喜哦！！。

布满荆棘的人生/ 2022年08月19日 01:50/ 0 赞/ 233 阅读

相关 android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现

android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现前言：根据屏幕的旋转自动实现应用界面旋转，横屏、竖屏、反向横屏、反向竖屏。布局文件 <?x

迈不过友情╰/ 2022年06月06日 05:13/ 0 赞/ 889 阅读

相关 cordova app强制横屏，config.xml配置横屏

cordova app强制横屏，config.xml配置横屏配置代码： <preference name="Orientation" value="lan

绝地灬酷狼/ 2021年10月19日 11:32/ 0 赞/ 594 阅读

相关 Bootstrap横屏后竖屏

在写页面的首页时候，竖屏显示正常，切换横屏，再切换竖屏。如图 1.竖屏 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

悠悠/ 2021年05月22日 20:36/ 0 赞/ 573 阅读