uniapp 屏幕适配之match-media 以及left-w

match-media不兼容APP端，仅H5,否则会导致match里面的内容全部触发显示。
所以解决办法如下：

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

条件编译H5

    export default {
        data() {
            return {
                H5:
            // #ifdef H5
                true
                // #endif
            // #ifndef H5
                false
                // #endif
                ,

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

    "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的区域）

    "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",

{
            "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