我們通過添加一系列接口讓 Weex 使用者可以控制排版參數(shù)。

一、設(shè)置頁(yè)面使用的 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);

二、設(shè)置頁(yè)面使用的 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. 設(shè)置全局的 deviceWidth

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

三、設(shè)置頁(yè)面保留原始 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();

四、強(qiáng)制頁(yè)面重新排版

• iOS:

[instance reloadLayout];

• Android:

instance.reloadPageLayout();