You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ky...@apache.org on 2019/08/30 09:16:38 UTC
[incubator-weex-site] branch master updated: [Doc] update to
support screen rotation (#492)
This is an automated email from the ASF dual-hosted git repository.
kyork pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/master by this push:
new eb92324 [Doc] update to support screen rotation (#492)
eb92324 is described below
commit eb92324e22a89501571253a387aaec3d5b009071
Author: katherine95s <51...@users.noreply.github.com>
AuthorDate: Fri Aug 30 17:16:34 2019 +0800
[Doc] update to support screen rotation (#492)
---
docs/docs/modules/meta.md | 11 ++++++++
docs/guide/advanced/multi-size-screen.md | 28 +++++++++++++++++++
docs/zh/docs/modules/meta.md | 11 +++++++-
docs/zh/guide/advanced/multi-size-screen.md | 42 +++++++++++++++++++++++------
4 files changed, 83 insertions(+), 9 deletions(-)
diff --git a/docs/docs/modules/meta.md b/docs/docs/modules/meta.md
index c792d72..95a46f3 100644
--- a/docs/docs/modules/meta.md
+++ b/docs/docs/modules/meta.md
@@ -13,7 +13,17 @@ The default width (viewport) of Weex container is 750px. The `setViewport` metho
* **@options**
* **`width`**, number value or `"device-width"` or `"device-height"` macros.
* **`height`**, number value or `"device-width"` or `"device-height"` macros.
+ * **`deviceWidth`**，number value.
+ ::: danger
+ iOS only,Android not support yet
+ :::
+ * **`deviceHeight`**，number value.
+ ::: danger
+ iOS only,Android not support yet
+ :::
* **`roundOffDeviation`** <Badge text="0.20.0+" type="warn" vertical="middle"/>, The default value is true, which means that the layout engine ignores the error caused by the decimal point in the layout; if there is a gap in the component splicing, you can set the `roundOffDeviation` to false, and the layout engine will automatically fill in the decimal point error.
+ * **`reserveCssStyles`**,set true to let the page reserve all CSS style values,designed to support screen rotation
+,[document](https://weex.apache.org/guide/advanced/multi-size-screen.html)。
::: tip
* Referance: W3C Spec [CSS Device Adaptation](https://drafts.csswg.org/css-device-adapt/#viewport-meta).
@@ -35,6 +45,7 @@ const meta = weex.requireModule('meta')
meta.setViewport({
width: 640,
roundOffDeviation: false
+ reserveCssStyles: true
})
App.el = '#root'
diff --git a/docs/guide/advanced/multi-size-screen.md b/docs/guide/advanced/multi-size-screen.md
index f47dc34..8b7e370 100644
--- a/docs/guide/advanced/multi-size-screen.md
+++ b/docs/guide/advanced/multi-size-screen.md
@@ -86,15 +86,26 @@ meta.setViewport({
#### b. Use WXSDKInstance
+* iOS:
```Objective-C
WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setViewportWidth:800.f];
```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setInstanceViewPortWidth(800);
+```
### 2. Set deviceWidth of a page
+::: danger
+iOS only,Android not support yet
+:::
+
<Badge text="v0.25+" type="warning"/>
+
#### a. Use Meta Module
```Javascript
@@ -133,18 +144,29 @@ meta.setViewport({
#### b. Use WXSDKInstance
+* iOS:
```Objective-C
WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setPageKeepRawCssStyles];
```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setPageKeepRawCssStyles();
+```
### 4. Force the page to relayout
<Badge text="v0.25+" type="warning"/>
+* iOS:
```Objective-C
[instance reloadLayout];
```
+* Android:
+```Java
+instance.reloadPageLayout();
+```
## Scenarios
@@ -159,12 +181,18 @@ If your app does not support screen rotation, you can ignore all issues above. W
1. Let the page reserve all CSS style values.
2. After screen rotation is done, use the code below to reset screen width for the page and trigger relayout.
+* iOS:
```Objective-C
CGFloat w = [UIScreen mainScreen].bounds.size.width;
CGFloat h = [UIScreen mainScreen].bounds.size.height;
[_instance setPageRequiredWidth:w height:h];
[_instance reloadLayout];
```
+* Android:
+```Java
+instance.resetDeviceDisplayOfPage();
+instance.reloadPageLayout();
+```
You could use latest Playground to test the [demo](http://editor.weex.io/p/wqyfavor/scroller/commit/37810078ef963388b699b5ad7d5e9881)
diff --git a/docs/zh/docs/modules/meta.md b/docs/zh/docs/modules/meta.md
index e472e0f..2d2e476 100644
--- a/docs/zh/docs/modules/meta.md
+++ b/docs/zh/docs/modules/meta.md
@@ -13,8 +13,16 @@ Weex 容器默认的宽度 (viewport) 是 750px，通过 setViewport 方法可
* **@options**
* **`width`**，number，具体数值或 `"device-width"` 和 `"device-height"` 宏。
* **`height`**，number，具体数据或 `"device-width"` 和 `"device-height"` 宏。
+ * **`deviceWidth`**，number。
+ ::: danger
+ Android暂不支持
+ :::
+ * **`deviceHeight`**，number。
+ ::: danger
+ Android暂不支持
+ :::
* **`roundOffDeviation`** <Badge text="0.20.0+ & Android Only" type="warn" vertical="middle"/>，表示layout引擎在布局时会忽略小数点导致的误差；若发现组件拼接处有缝隙，可以将 `roundOffDeviation` 设置为false，此时layout引擎将自动填补小数点误差，默认值为 true。
-
+ * **`reserveCssStyles`**，设置为true保留页面样式，用于支持横竖屏切换,[文档](https://weex.apache.org/zh/guide/advanced/multi-size-screen.html)。
::: tip 注意
* 需要注意的是：只有在页面渲染开始之前设置 viewport 才会生效。 也就是说，setViewport 方法只能在入口文件中使用，而且要在 new Vue(...) 之前调用；如果是在组件中使用，就只有在渲染到该组件的时候才会执行相应的代码，此时页面已经处于渲染过程中，设置 viewport 将不会再生效。
* 宽度和高度的单位默认是 px，暂不支持其他单位。
@@ -34,6 +42,7 @@ const meta = weex.requireModule('meta');
meta.setViewport({
width: 640,
roundOffDeviation: false
+ reserveCssStyles: true
});
App.el = '#root';
diff --git a/docs/zh/guide/advanced/multi-size-screen.md b/docs/zh/guide/advanced/multi-size-screen.md
index 469eb5e..a189423 100644
--- a/docs/zh/guide/advanced/multi-size-screen.md
+++ b/docs/zh/guide/advanced/multi-size-screen.md
@@ -10,9 +10,6 @@ has_chapter_content: true
## 简介
本文将介绍 Weex 适配不同尺寸屏幕的方法以及横竖屏动态切换时如何自适应。
-::: danger
-Android暂不支持
-:::
## Weex 如何将前端样式值转换为系统坐标值
@@ -79,19 +76,30 @@ dimension(UIKit) = 375 / 750 * 667 = 333.5
```Javascript
const meta = weex.requireModule('meta');
meta.setViewport({
- width: 800
+ width: 800
});
```
#### 2. 使用 WXSDKInstance 的接口
+* iOS:
```Objective-C
WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setViewportWidth:800.f];
```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setInstanceViewPortWidth(800);
+```
+
### 二、设置页面使用的 deviceWidth
+::: danger
+Android暂不支持
+:::
+
<Badge text="v0.25+" type="warning"/>
#### 1. 使用 Meta Module
@@ -99,8 +107,8 @@ WXSDKInstance* instance = [[WXSDKInstance alloc] init];
```Javascript
const meta = weex.requireModule('meta');
meta.setViewport({
- deviceWidth: 375,
- deviceHeight: 800
+ deviceWidth: 375,
+ deviceHeight: 800
});
```
@@ -126,24 +134,35 @@ WXSDKInstance* instance = [[WXSDKInstance alloc] init];
```Javascript
const meta = weex.requireModule('meta');
meta.setViewport({
- reserveCssStyles: true
+ reserveCssStyles: true
});
```
#### 2. 使用 WXSDKInstance 的接口
+* iOS:
```Objective-C
WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setPageKeepRawCssStyles];
```
+* Android:
+```Java
+WXSDKInstance instance = new WXSDKInstance(mContext);
+instance.setPageKeepRawCssStyles();
+```
### 四、强制页面重新排版
-<Badge text="v0.25+" type="warning"/>
+<Badge text="v0.25+" type="warning"/>
+* iOS:
```Objective-C
[instance reloadLayout];
```
+* Android:
+```Java
+instance.reloadPageLayout();
+```
## 使用场景
@@ -157,12 +176,19 @@ WXSDKInstance* instance = [[WXSDKInstance alloc] init];
1、设置页面保留原始 CSS 样式值
2、当屏幕旋转完成后，调用以下接口设置新的屏幕尺寸，并重新排版
+
+* iOS:
```Objective-C
CGFloat w = [UIScreen mainScreen].bounds.size.width;
CGFloat h = [UIScreen mainScreen].bounds.size.height;
[_instance setPageRequiredWidth:w height:h];
[_instance reloadLayout];
```
+* Android:
+```Java
+instance.resetDeviceDisplayOfPage();
+instance.reloadPageLayout();
+```
你可以使用最新 Playground 扫码[示例](http://editor.weex.io/p/wqyfavor/scroller/commit/37810078ef963388b699b5ad7d5e9881)
要在控制面板里允许屏幕自动旋转。