收藏
回答

小程序在 Pc 和 iPad 设置自动横屏无效?

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black",
    "pageOrientation": "auto"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "lazyCodeLoading": "requiredComponents",
  "resizable": true
}


index.wxml

<match-media min-width="300" max-width="600">
  <view>当页面宽度在 300 ~ 600 px 之间且横屏时展示这里</view>
</match-media>

<match-media min-height="400" orientation="landscape">
  <view>当页面高度不小于 400 px 且屏幕方向为纵向时展示这里</view>
</match-media>

回答关注问题邀请回答
收藏

1 个回答

  • 一笑皆春
    一笑皆春
    02-04

    参考

    创建不同的小程序版本:首先,确保你的小程序有多个版本,例如一个PC端版本和一个手机端版本。这通常是通过app.json文件中的window字段来配置的。

    设置横屏模式:在PC端版本的配置中,设置屏幕方向为横屏。这可以通过在window字段中添加或修改orientation属性来实现。例如,设置为orientation: 'landscape'将使PC端自动横屏。

    禁止手机横屏:在手机端版本的配置中,将屏幕方向设置为竖屏。同样在window字段的orientation属性中设置。例如,设置为orientation: 'portrait'将禁止手机横屏。

    条件编译:由于PC和iPad的屏幕大小以及交互方式与手机不同,你可能还需要使用条件编译来为不同的设备版本编写不同的代码。你可以使用微信小程序的wx.canIUse函数来检测当前设备的特性,然后根据检测结果加载相应的代码块。


    02-04
    有用
    回复 2
    • Qiu (吉²)
      Qiu (吉²)
      02-04
      请问pageOrientation可以手动设置吗?
      02-04
      回复
    • 一笑皆春
      一笑皆春
      02-04回复Qiu (吉²)
      好像目前没有相关的api能手动操作
      02-04
      回复
登录 后发表内容