小程序
小游戏
企业微信
微信支付
扫描小程序码分享
小程序某个页面怎么强制设置横屏
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
响应显示区域变化
显示区域尺寸
显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。
从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在 app.json 的 window 段中设置 "pageOrientation": "auto" ,或在页面 json 文件中配置 "pageOrientation": "auto" 。
app.json
window
"pageOrientation": "auto"
以下是在单个页面 json 文件中启用屏幕旋转的示例。
代码示例:
{ "pageOrientation": "auto" }
如果页面添加了上述声明,则在屏幕旋转时,这个页面将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。
从小程序基础库版本 2.5.0 开始, pageOrientation 还可以被设置为 landscape ,表示固定为横屏显示。
pageOrientation
landscape
从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在 app.json 中添加 "resizable": true 。
"resizable": true
{ "resizable": true }
如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。注意:在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
Media Query
有时,对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。
.my-class { width: 40px; } @media (min-width: 480px) { /* 仅在 480px 或更宽的屏幕上生效的样式规则 */ .my-class { width: 200px; } }
在 WXML 中,可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。
此外,可以在页面或者自定义组件 JS 中使用 this.createMediaQueryObserver() 方法来创建一个 MediaQueryObserver 对象,用于监听指定的 media query 的匹配状态。
this.createMediaQueryObserver()
MediaQueryObserver
在开发者工具中预览效果
屏幕旋转事件
有时,仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。
在 js 中读取页面的显示区域尺寸,可以使用 selectorQuery.selectViewport 。
页面尺寸发生改变的事件,可以使用页面的 onResize 来监听。对于自定义组件,可以使用 resize 生命周期来监听。回调函数中将返回显示区域的尺寸信息。(从基础库版本 2.4.0 开始支持。)
onResize
Page({ onResize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } }) Component({ pageLifetimes: { resize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } } })
此外,还可以使用 wx.onWindowResize 来监听(但这不是推荐的方式)。
Bug & tips:
live-pusher
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
小程序横屏可参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html
官方回答请注意, 这个问题问的是 “强制横屏” 你这个文档是如何监听横屏的,并不能解决这个问题, 请给出 “强制横屏”的回答, 或者确认下目前能做还是不能做,你这回答让我很为难的
仔细看文档啊,官方回答不会无聊给你一个链接的
auto :自动
portrait : 默认(竖屏)
landscape : 横屏
你再看一下这个问题再说吧。
完全能做啊。就按照官方回答在你想要的那个页面json里面加入
"pageOrientation"
:
"landscape"
就可以实现了
小程序不支持横屏吧,如果想把内容横过来,只能用css3 实现。
整个小程序横屏要怎么做
目前应该只支持整个小程序横屏
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
响应显示区域变化
显示区域尺寸
显示区域指小程序界面中可以自由布局展示的区域。在默认情况下,小程序显示区域的尺寸自页面初始化起就不会发生变化。但以下两种方式都可以改变这一默认行为。
在手机上启用屏幕旋转支持
从小程序基础库版本 2.4.0 开始,小程序在手机上支持屏幕旋转。使小程序中的页面支持屏幕旋转的方法是:在
app.json
的window
段中设置"pageOrientation": "auto"
,或在页面 json 文件中配置"pageOrientation": "auto"
。以下是在单个页面 json 文件中启用屏幕旋转的示例。
代码示例:
{ "pageOrientation": "auto" }
如果页面添加了上述声明,则在屏幕旋转时,这个页面将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。
从小程序基础库版本 2.5.0 开始,
pageOrientation
还可以被设置为landscape
,表示固定为横屏显示。在 iPad 上启用屏幕旋转支持
从小程序基础库版本 2.3.0 开始,在 iPad 上运行的小程序可以支持屏幕旋转。使小程序支持 iPad 屏幕旋转的方法是:在
app.json
中添加"resizable": true
。代码示例:
{ "resizable": true }
如果小程序添加了上述声明,则在屏幕旋转时,小程序将随之旋转,显示区域尺寸也会随着屏幕旋转而变化。注意:在 iPad 上不能单独配置某个页面是否支持屏幕旋转。
Media Query
有时,对于不同尺寸的显示区域,页面的布局会有所差异。此时可以使用 media query 来解决大多数问题。
代码示例:
.my-class { width: 40px; } @media (min-width: 480px) { /* 仅在 480px 或更宽的屏幕上生效的样式规则 */ .my-class { width: 200px; } }
在 WXML 中,可以使用 match-media 组件来根据 media query 匹配状态展示、隐藏节点。
此外,可以在页面或者自定义组件 JS 中使用
this.createMediaQueryObserver()
方法来创建一个MediaQueryObserver
对象,用于监听指定的 media query 的匹配状态。在开发者工具中预览效果
屏幕旋转事件
有时,仅仅使用 media query 无法控制一些精细的布局变化。此时可以使用 js 作为辅助。
在 js 中读取页面的显示区域尺寸,可以使用 selectorQuery.selectViewport 。
页面尺寸发生改变的事件,可以使用页面的
onResize
来监听。对于自定义组件,可以使用 resize 生命周期来监听。回调函数中将返回显示区域的尺寸信息。(从基础库版本 2.4.0 开始支持。)代码示例:
Page({ onResize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } }) Component({ pageLifetimes: { resize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } } })
此外,还可以使用 wx.onWindowResize 来监听(但这不是推荐的方式)。
Bug & tips:
live-pusher
组件在屏幕旋转时方向异常。小程序横屏可参考:https://developers.weixin.qq.com/miniprogram/dev/framework/view/resizable.html
官方回答请注意, 这个问题问的是 “强制横屏” 你这个文档是如何监听横屏的,并不能解决这个问题, 请给出 “强制横屏”的回答, 或者确认下目前能做还是不能做,你这回答让我很为难的
仔细看文档啊,官方回答不会无聊给你一个链接的
auto :自动
portrait : 默认(竖屏)
landscape : 横屏
你再看一下这个问题再说吧。
完全能做啊。就按照官方回答在你想要的那个页面json里面加入
"pageOrientation"
:
"landscape"
就可以实现了
小程序不支持横屏吧,如果想把内容横过来,只能用css3 实现。
整个小程序横屏要怎么做
目前应该只支持整个小程序横屏