美文网首页
uni-app中app横竖屏切变换(js,css控制)配置与锁死

uni-app中app横竖屏切变换(js,css控制)配置与锁死

作者: 月下小酌_dbd5 | 来源:发表于2022-10-12 11:57 被阅读0次
  • 在App.vue中
<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
    // app 锁死横屏 
    plus.screen.lockOrientation("landscape-primary"); 
    // app 锁死竖屏 
    // plus.screen.lockOrientation("portrait-primary"); 
  },
  onShow: function() {
     console.log('App Show')
     // js样式控制,官方文档里有:https://uniapp.dcloud.net.cn/api/ui/window.html#onwindowresize
     uni.onWindowResize((res) => {
        if (res.size.windowWidth > res.size.windowHeight) {
           alert('此时为横屏')
        }
    })
  },
  onHide: function() {
    console.log('App Hide')
  }
}
</script>
<style lang="scss">
  /* 竖屏 */
  @media screen and (orientation: portrait) {

  }
  /* 横屏 */
  @media screen and (orientation: landscape) {

  } 
</style>

相关文章

网友评论

      本文标题:uni-app中app横竖屏切变换(js,css控制)配置与锁死

      本文链接:https://www.haomeiwen.com/subject/krptzrtx.html