docs: update media query component and api

docs/api/_sidebar.md

@@ -85,6 +85,7 @@
   * [下拉刷新](api/ui/pulldown.md)
   * [节点信息](api/ui/nodes-info.md)
   * [节点布局相交状态](api/ui/intersection-observer.md)
+  * [媒体查询](api/ui/media-query-observer.md)
   * [自定义组件](api/ui/nextTick.md)
   * [菜单](api/ui/menuButton.md)
 * 页面和窗体

docs/api/ui/media-query-observer.md

@@ -3,22 +3,24 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
 ### uni.createMediaQueryObserver([this])
 创建并返回一个 ``MediaQueryObserver`` 对象实例。
 
+> 从 HbuilderX 2.8.12 版本开始支持
+
 **this说明：**
 
-自定义组件实例。**支付宝小程序不支持此参数，传入仅为抹平写法差异**
+自定义组件实例。**小程序端不支持此参数，传入仅为抹平写法差异**
 
 ### MediaQueryObserver 对象的方法列表
 
-|方法|说明|
-|:-|:-|
-|MediaQueryObserver.observe(Object descriptor, function callback)|开始监听页面 media query 变化情况|
-|MediaQueryObserver.disconnect()|停止监听，回调函数将不再触发|
+|方法|说明|平台差异|
+|:-|:-|:-|
+|MediaQueryObserver.observe(Object descriptor, function callback)|开始监听页面 media query 变化情况|小程序非微信端，只查询一次，不支持监听|
+|MediaQueryObserver.disconnect()|停止监听，回调函数将不再触发||
 
 **observe 回调函数包含一个参数**
 
-||类型|说明|
+|参数|类型|说明|
 |:-|:-|:-|
-|intersectionRatio|boolean|页面的当前状态是否满足所指定的 media query|
+|matches|boolean|页面的当前状态是否满足所指定的 media query|
 
 ### 代码示例
 
@@ -75,7 +77,6 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
                     console.log('######### matches #########', matches)
                     this.matches = matches;
                 })
-                console.log('########## create mediaQueryOb ###########', this.mediaQueryOb)
             },
             landscapeObserver() {
                 // console.log('--------- this----------', this)
@@ -90,7 +91,6 @@ MediaQueryObserver 对象，用于监听页面 media query 状态的变化，如
             remove() {
                 this.mediaQueryOb.disconnect()
                 landscapeObs.disconnect()
-                console.log('########## destroy mediaQueryOb ###########', this.mediaQueryOb)
             }
         }
     }

docs/component/_sidebar.md

@@ -2,6 +2,7 @@
   * [view](component/view.md)
   * [scroll-view](component/scroll-view.md)
   * [swiper](component/swiper.md)
+  * [match-media](component/match-media.md)
   * [movable-area](component/movable-view.md?id=movable-area)
   * [movable-view](component/movable-view.md?id=movable-view)
   * [cover-view](/component/cover-view?id=cover-view)

docs/component/match-media.md

@@ -5,17 +5,21 @@ media query 匹配检测节点。
 可以指定一组 media query 规则，满足时，这个节点才会被展示。
 通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。
 
+> 从 HbuilderX 2.8.12 版本开始支持
+
 **属性说明**
 
-|属性名|类型|默认值|必填|说明|平台差异说明|
-|:-|:-|:-|:-|:-|:-|
-|min-width|number||否|页面最小宽度（ px 为单位）||
-|max-width|number||否|页面最大宽度（ px 为单位）||
-|width|number||否|页面宽度（ px 为单位）||
-|min-height|number||否|页面最小高度（ px 为单位）||
-|max-height|number||否|页面最大高度（ px 为单位）||
-|height|number||否|页面高度（ px 为单位）||
-|orientation|string||否|屏幕方向（ landscape 或 portrait ）||
+|属性名|类型|默认值|必填|说明|
+|:-|:-|:-|:-|:-|
+|min-width|number||否|页面最小宽度（ px 为单位）|
+|max-width|number||否|页面最大宽度（ px 为单位）|
+|width|number||否|页面宽度（ px 为单位）|
+|min-height|number||否|页面最小高度（ px 为单位）|
+|max-height|number||否|页面最大高度（ px 为单位）|
+|height|number||否|页面高度（ px 为单位）|
+|orientation|string||否|屏幕方向（ landscape 或 portrait ）|
+
+> 平台差异说明: 小程序非微信端，不支持屏幕动态改变
 
 **match-media 示例**