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
函数来检测当前设备的特性,然后根据检测结果加载相应的代码块。