简书链接:uniapp屏幕适配之matchmedia以及leftwindowtopwindow等适配app和h5
文章字数：496,阅读全文大约需要1分钟
match-media不兼容APP端，仅H5,否则会导致match里面的内容全部触发显示。
所以解决办法如下：

1
2
3
4
<block v-if="H5"
	>
	<match-media :min-width="801" :orientation="portrait">
</block>

条件编译H5

1
2
3
4
5
6
7
8
9
10
11
export default {
	data() {
		return {
			H5:
		// #ifdef H5
			true
			// #endif
		// #ifndef H5
			false
			// #endif
			,

关于left-window top-window
pages.json根节点定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
"rightWindow": {
	"path": "windows/right-window.vue",
	"style": {
			"width": "150px"
	},
	"matchMedia": {
		"minWidth": 1160 //生效条件，当窗口宽度大于768px时显示  
	}
},
"leftWindow": {
	"path": "windows/left-window.vue",
	"style": {
		"width": "150px"
	},
	"matchMedia": {
		"minWidth": 1160 //生效条件，当窗口宽度大于768px时显示  
	}
},
"topWindow": {
	"path": "windows/top-window.vue",
	"style": {
		"height": "42px"
	},
	"matchMedia": {
		"minWidth": 1160 //生效条件，当窗口宽度大于768px时显示  
	}
},

"width": "150px"
代表此区域的window的宽度，
match则是达到了minwidth才触发。

然后pages.json中globalStyle
定义主区域最大宽度，如果是部署在app,理论上不应该限制最大宽度，而pc浏览器打开，那么我让他尽可能小点，这样他会两边留白（或者留left-window,right-window的区域）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	"globalStyle": {


		"h5": {
			//#ifdef H5
			"maxWidth": 1160,
			// #endif 
	
			"navigationBarTextStyle": "black",
			"navigationBarBackgroundColor": "#F1F1F1"
		},
		//设置宽屏最大宽度
		"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
		"rpxCalcBaseDeviceWidth": 375 // 设备实际宽度超出 rpx 计算所支持的最大宽度时，rpx计算所采用的固定屏幕宽度，单位 px，默认值为 375

	},
	"subPackages": []
}

另外
我要网页端隐藏
pages.json中"navigationStyle": "custom",

1
2
3
4
5
6
7
8
9
10
11
12
13
{
			"path": "pages/main/product/product",
			//#ifdef H5
			"navigationStyle": "custom",
			//#endif
			"style": {
				"enablePullDownRefresh": false,
				"navigationBarTitleText": "成品",
				"app-plus": {
					"titleNView": true
				}
			}
		}

这样打包到app中为完整应用时显示，打包到app网页端，然后自己做全屏套壳容器，就隐藏标题栏
官方h5适配参考文章
https://zh.uniapp.dcloud.io/tutorial/adapt.html