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>
参考
创建不同的小程序版本：首先，确保你的小程序有多个版本，例如一个PC端版本和一个手机端版本。这通常是通过
app.json文件中的window字段来配置的。设置横屏模式：在PC端版本的配置中，设置屏幕方向为横屏。这可以通过在
window字段中添加或修改orientation属性来实现。例如，设置为orientation: 'landscape'将使PC端自动横屏。禁止手机横屏：在手机端版本的配置中，将屏幕方向设置为竖屏。同样在
window字段的orientation属性中设置。例如，设置为orientation: 'portrait'将禁止手机横屏。条件编译：由于PC和iPad的屏幕大小以及交互方式与手机不同，你可能还需要使用条件编译来为不同的设备版本编写不同的代码。你可以使用微信小程序的
wx.canIUse函数来检测当前设备的特性，然后根据检测结果加载相应的代码块。