公司项目用weex已经完成了iPhone版本，突然接到需求需要iPad版本。
打开xcode直接运行在iPad上，发现奇丑无比，所有控件都被等比放大了。
在公司大佬的指点下，发现了一个神奇的功能。meta.setViewport()官网文档入口
大概意思是会可以用这个方法改变默认的最大宽度750px。
我猜想没改这个属性之前的逻辑应该是这样的

设备当前宽度/750 -> scale
这个scale就是缩放比例，然后所有的控件和字体都会按照这个scale去缩放。

那如果是这样的话我调用修改为iPad的宽度768*2=1536是不是就会一比一了呢。
直接上码

1
2
3
4
5
6
7
 beforeCreate(){
  const meta = weex.requireModule('meta')
// 配置 viewport 的宽度为 1536px
  meta.setViewport({
    width: 1536
  })
}

我是在我的home.vue里面写的。发现确实OK了。
不过有些小问题。

  1. 有些控件只到750没有撑开
  2. 因为我的多页应用，每个vue都是一个jsbundle，所以需要每个页面都要写上面一段话

#####第一个问题

  • 把写死750px的都注释掉
  • 有些没有写750px比如702px那就写left:24px ,right:24px

####第二个问题

  • 通过阅读weexsdk的iOS源码发现，其实他就是给weexinterface设置了一个私有变量的值(安卓应该同理)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    WX_EXPORT_METHOD_SYNC(@selector(setViewport:))

    - (void)setViewport:(NSDictionary *)viewportArguments
    {
        CGFloat viewportWidthFloat;
        id viewportWidth = viewportArguments[@"width"];
        if ([viewportWidth isKindOfClass:[NSString class]]) {
            if ([viewportWidth isEqualToString:@"device-width"]) {
                viewportWidthFloat = [WXUtility portraitScreenSize].width;
            } else if ([viewportWidth isEqualToString:@"device-height"]) {
                viewportWidthFloat = [WXUtility portraitScreenSize].height;
            } else {
                viewportWidthFloat = [WXConvert CGFloat:viewportWidth];
            }
        } else {
            viewportWidthFloat = [WXConvert CGFloat:viewportWidth];
        }
        
        if (viewportWidthFloat > 0) {
            self.weexInstance.viewportWidth = viewportWidthFloat;
        }
    }
    所以我尝试通过修改我的weex容器：DBWXBaseViewController里面找到render方法找到 [_instance renderWithURL:_url options:_param data:nil];在下面写上 _instance.viewportWidth = 1536;即可（安卓是同样的道理找到Activity或Fragment修改）
  • 发现viewportWidth报错，#import <WeexSDK/WXSDKInstance_private.h>即可，这是私有属性，目前还不知道有什么风险，我也只是调研阶段。（反正我问官方的人他们没说这个方式）
  • 在不同设备上viewportWidth应该是不一样的所以需要通过对设备的分辨率和屏幕宽高继续动态设置，目前我还只是调研阶段。后期完善了会继续更新。

####18-12-13更新
更新了新的weexsdk发现WXSDKInstance_private.h引用不到了
稍稍改进一下xcode配置
找到build setting里的Header Search Paths 添加一条”${PODS_ROOT}/Headers/Private” 就OK了