我们通过添加一系列接口让 Weex 使用者可以控制排版参数。

一、设置页面使用的 viewPortWidth

1. 使用 Meta Module

const meta = weex.requireModule('meta');
meta.setViewport({
    width: 800
});

2. 使用 WXSDKInstance 的接口

• iOS:

WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setViewportWidth:800.f];

• Android:

WXSDKInstance instance = new WXSDKInstance(mContext);
instance.setInstanceViewPortWidth(800);

二、设置页面使用的 deviceWidth

Android暂不支持

1. 使用 Meta Module

const meta = weex.requireModule('meta');
meta.setViewport({
    deviceWidth: 375,
    deviceHeight: 800
});

2. 使用 WXSDKInstance 的接口

WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setPageRequiredWidth:375.f height:800.f];

3. 设置全局的 deviceWidth

[WXSDKEngine setGlobalDeviceSize:CGSizeMake([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];

三、设置页面保留原始 CSS 样式值

1. 使用 Meta Module

const meta = weex.requireModule('meta');
meta.setViewport({
    reserveCssStyles: true
});

2. 使用 WXSDKInstance 的接口

• iOS:

WXSDKInstance* instance = [[WXSDKInstance alloc] init];
[instance setPageKeepRawCssStyles];

• Android:

WXSDKInstance instance = new WXSDKInstance(mContext);
instance.setPageKeepRawCssStyles();

四、强制页面重新排版

• iOS:

[instance reloadLayout];

• Android:

instance.reloadPageLayout();