As we all know, iPhone X introduce us a safe-area concept, and make it much more compatible with iPhone X is my aim, all the iOS developers pay more attention
on it. By referencing Webkit <https://webkit.org/blog/7929/designing-websites-for-iphone-x/> strategy for iPhone X, the first new feature is that iOS 11 Webkit includes a new css function, env(), and set of four pre-defined environment variables, safe-area-inset-left, safe-area-inset-right, safe-area-inset-top and safe-area-inset-bottom, this feature can respect the safe areas as follow. [image: 内嵌图片 3] And Weex has supported the four css value now, see the pull request https://github.com/apache/incubator-weex/pull/916 the second feature is that WebKit <https://webkit.org/blog/7929/designing-websites-for-iphone-x/> extends the existing viewport meta tag called `viewport-fit`, viewport-fit can be cover or contain, the left side is `contain` effect, and the right one is the `cover` viewport-fit effect. [image: 内嵌图片 1][image: 内嵌图片 2] What WeexSDK for iOS should do is to support view-port module by change the viewport to be contain or cover mode. But there is an problem that all the weex view will be added to WXRootView, the rootView will always be there, and it is the root tag element super view. And the frame of WXRootView will be the WXSDKInstance frame size. When the frame of WXRootView is full screen size, the viewport-fit problem comes, or the viewport take no effect to it. Now I have three plans to support this feature 1. add a wrapper view between WXRootView and root tag element , by this way , we adjust the wrapper view frame to set the viewport of weex container. benefits: there is no need to adjust WXRootView's frame, because not only the WeexSDK adjust the WXRootView frame, but also developers, there can be misunderstand, if we adjust WXRootView's frame. lacks: the operation for adding subview to WXRootView ,we must re-write to add to the wrapperView, maybe there are more details we need handle. 2. Adjust rootView frame directly 3. manually adjust the frame of sub-element such as the fixed element and others to fit to the viewport-fit mode. this is what I can think about. Maybe there are more better ideas. comments, please.
