前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >apicloud APP横竖屏切换

apicloud APP横竖屏切换

作者头像
田小檬
发布2022-08-30 17:07:15
1.3K0
发布2022-08-30 17:07:15
举报
文章被收录于专栏:田小檬博客

本文最后更新于2022年06月11日,已超过1天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

APP开发中会遇到例如视频全屏播放如果不是使用原生模块,则需要通过将屏幕切换为横屏显示才能实现全屏。或者某些APP用户在使用pad体验时提供横竖屏切换体验会更好。

这个时候就需要使用到setScreenOrientation来实现横竖屏切换。

参数:

orientation:

类型:字符串

默认值:无

描述:旋转屏幕到指定方向,或根据重力感应自动旋转;当前为横屏时,若想只在横屏间根据重力切换,则可以传 auto_landscape,竖屏间切换则传 auto_portrait。

取值范围:

  • portrait_up //竖屏时,屏幕在home键的上面
  • portrait_down //竖屏时,屏幕在home键的下面,部分手机如iPhone X系列不支持
  • landscape_left //横屏时,屏幕在home键的左边
  • landscape_right //横屏时,屏幕在home键的右边
  • auto //屏幕根据重力感应在横竖屏间自动切换 (需要自动切换横竖屏可以用该值)
  • auto_portrait //屏幕根据重力感应在竖屏间自动切换
  • auto_landscape //屏幕根据重力感应在横屏间自动切换

例子:

api.setScreenOrientation({ orientation: 'landscape_left'});

例如设置了横竖屏自动切换同时页面中应用了UI模块。如果设计到宽度、高度计算需要做监听来处理适应问题。如果页面支持自适应则无需处理。

可以通过orientationchange实现监听横竖屏切换事件

window.addEventListener("orientationchange", function(){ });

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档