[incubator-weex-site] branch draft updated: Update meta.md

[zs...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

zshshr pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git


The following commit(s) were added to refs/heads/draft by this push:
     new 01d127b  Update meta.md
01d127b is described below

commit 01d127b640007083f993098481b41ff72bc4dbd9
Author: zshshr <zh...@gmail.com>
AuthorDate: Fri Dec 14 12:27:26 2018 +0800

    Update meta.md
---
 docs/docs/modules/meta.md | 102 ++++++++++++++++++++++++++--------------------
 1 file changed, 57 insertions(+), 45 deletions(-)

diff --git a/docs/docs/modules/meta.md b/docs/docs/modules/meta.md
index 0f42edc..c6812fc 100644
--- a/docs/docs/modules/meta.md
+++ b/docs/docs/modules/meta.md
@@ -1,50 +1,61 @@
-# meta <Badge text="0.10.0+" type="warn" vertical="middle"/>
+---
+title: meta
+type: references
+group: Build-in Modules
+order: 9.05
+version: 2.1
+---
 
-meta 模块可用于声明单个页面的元信息，通常是一些页面级别的配置，如容器的显示宽度 (viewport) 等。默认情况下，应用无需修改此配置。
+# meta
+
+The meta module can be used to update meta information for a single page, such as the viewport of the container.
 
 ## API
 
 ### setViewport(options)
 
-Weex 容器默认的宽度 (viewport) 是 750px，通过 setViewport 方法可以改变页面的显示宽度，仅对当前页面生效。
-::: warning 注意
-需要注意的是：只有在页面渲染开始之前设置 viewport 才会生效。 也就是说，setViewport 方法只能在入口文件中使用，而且要在 new Vue(...) 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。
-:::
+<span class="weex-version">0.10.0+</span>
+
+The default width (viewport) of Weex container is 750px. The `setViewport` method can change the viewport of the page and only takes effect on the current page.
+
+> Notice: **The viewport must be set before the page rendering starts.** In other words, the `setViewport` method can only be used in the entry file, and before the `new Vue (...)` statement. If it's used in the component, the code is executed only when the component is being rendered, meanwhile, the page is already in the rendering process, set the viewport will not take effect again.
 
-#### 参数
+it is only in the rendering of the components will be implemented The corresponding code,
 
-参数配置借鉴了 W3C 标准中的 CSS Device Adaptation，目前支持如下属性：
-|key|描述|
-|---|---|
-|options.width|数值，或者 `"device-width"` 和 `"device-height"` 之一|
-|options.height|数值，或者 `"device-width"` 和 `"device-height"` 之一|
+#### Parameters
 
-宽度和高度的单位默认是 px，暂不支持其他单位。
+Referance: W3C Spec [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
 
-## Demo
++ `options`: viewport configuration
+  + `width`: Number or `"device-width"` or `"device-height"`.
+  + `height`: Number or `"device-width"` or `"device-height"`.
 
-入口文件：
+The default unit of the width and height is `px`, other units are not supported.
 
-```javascript
+#### Example
+
+The entry file:
+
+```js
 // entry.js
 
-import App from './app.vue';
-const meta = weex.requireModule('meta');
+import App from './app.vue'
+const meta = weex.requireModule('meta')
 
-// 配置 viewport 的宽度为 640px
+// The width of the viewport is set to 640px
 meta.setViewport({
   width: 640
-});
+})
 
-App.el = '#root';
-new Vue(App);
+App.el = '#root'
+new Vue(App)
 ```
 
-在入口文件中配置了 viewport 的宽度为 640 之后，当前页面中的所有组件都会以 640px 作为满屏宽度。
+After configuring the width of the viewport to 640 in the entry.js, all the components in the current page will take 640px as full screen width.
 
-组件文件：
+Example component:
 
-```vue
+```html
 <!-- app.vue -->
 <template>
   <div>
@@ -61,26 +72,27 @@ new Vue(App);
 </template>
 
 <style scoped>
-.box750 {
-  width: 750px;
-  height: 750px;
-  background-color: #eeeeee;
-}
-.box640 {
-  width: 640px;
-  height: 640px;
-  background-color: #cccccc;
-}
-.box480 {
-  width: 480px;
-  height: 480px;
-  background-color: #aaaaaa;
-}
-.text {
-  font-size: 50px;
-}
+  .box750 {
+    width: 750px;
+    height: 750px;
+    background-color: #EEEEEE;
+  }
+  .box640 {
+    width: 640px;
+    height: 640px;
+    background-color: #CCCCCC;
+  }
+  .box480 {
+    width: 480px;
+    height: 480px;
+    background-color: #AAAAAA;
+  }
+  .text {
+    font-size: 50px;
+  }
 </style>
 ```
 
-[试试看](http://dotwe.org/vue/76e5656fb735fcca0c78facbd1edcde3)。（由于 [http://dotwe.org](http://dotwe.org/vue) 目前还不支持配置入口文件，例子中的效果暂时无法在线查看。）
-本地开发环境的搭建可以参考：[《搭建开发环境》](http://weex-project.io/cn/guide/set-up-env.html)。
+[Try it](http://dotwe.org/vue/7d0302fe499ab08afdb12a376c646b59). (The http://dotwe.org doesn't support to configure the entry file currently.)
+
+Referance: [Set up development environment](../../guide/set-up-env.html).