Hi, all Since Weex was born, we don't support hot-layout after screen orientation changed. And for pad devices, we are not supporting very well. There are multiple issues related to this feature on github.
https://github.com/apache/incubator-weex-site/issues/399 https://github.com/apache/incubator-weex/issues/2103 https://github.com/apache/incubator-weex/issues/2219 I cannot list all issues in this mail, but from inside Alibaba and outside developers. We must support this feature. Long ago, Weex on iOS/Android provided interface to set view-port-width for each page via meta module <https://weex.apache.org/docs/modules/meta.html#setviewport>. And currently, on initialization of Weex, we set current screen size to WeexCore environment variable. CGSize screenSize = [UIScreen mainScreen].bounds.size; env->SetDeviceWidth(std::to_string(screenSize.width)); env->SetDeviceHeight(std::to_string(screenSize.height)); For all pages, we use global device-width, page's view-port-width and px values of styles to determine coordinates and dimensions of a component. There are mainly two issues here: 1. Our layout system receives and manipulates SYSTEM UIKit coordinates. For example, on iOS. 375px in CSS style, 750 view-port-width, and iPhone6 screen width 375(actually 750 physical pixels with screen scale as 2) produces 187.5 width value to layout system, and after layout we set the UIView's width as 187.5 and it displays as half screen on iPhone6. So view-port-width and screen-width both matter in converting a style in px value to final UIView frame. 2. After unit converting in Issue 1, we set the UIKit value to layout node and we dropped the raw style value for better memory usage. Unlike browsers which will reserve raw CSS style values, we cannot HOT-RELOAD-LAYOUT a page after screen orientation changes. Currently, we can only let users to reload all page from JS after screen changes. For issue 1, we are now providing a new API to set a page specific required device size. For issue 2, we should reserve all raw css styles for a page which should be hot-layout-reloaded. And whether to reserve styles is up to user. I have committed my modifications of WeexCore and iOS to https://github.com/wqyfavor/incubator-weex/commit/3a9ea7950a1a63550a3711a2e8450215ffa8dbc7 In this patch, I supported hot-reload a page on iOS. Changes a) Add a flag reserve_css_styles for RenderPage which controls whether to reserve all raw CSS style values in RenderObject. b) Add setDeviceSize method to meta module so that JS can determine the screen size it uses when rendering a page. c) Add setPageArguments method to meta module so that JS can pass reserveCssStyles as "true" to turn on reserve_css_styles flag of RenderPage. d) Add setPageKeepRawCssStyles, setPageArgument, setViewportWidth, setPageRequiredWidth methods to WXSDKInstance so that native developers can determine flags and page required specific view-port-width, device-size. e) Add reloadLayout method to hot reload a page. Usage On iOS, after screen orientation changes, we set new page required width to instance and call reloadLayout. - (*void*)didRotateFromInterfaceOrientation:(UIInterfaceOrientation )fromInterfaceOrientation { CGFloat w = [UIScreen mainScreen].bounds.size.width; CGFloat h = [UIScreen mainScreen].bounds.size.height; NSLog(*@"rotate from: %@, screen size(%f, %f)"*, convertInterfaceOrientationToString(fromInterfaceOrientation), w, h); *if* (_instance) { //[_instance setViewportWidth:w / MIN(w, h) * WXDefaultScreenWidth]; [_instance setPageRequiredWidth:w height:h]; [_instance reloadLayout]; } } Problems For all styles in 'px' or without any suffix(also treated as 'px'), when screen size changed and we triggered hot-reloading. The actual converted value will also change which will make text font size looks bigger. So for a page which requires mutli-size screen fitting. It must use wx unit for styles that should not fit screen size. You can check this demo. In this demo, I set text and panel height to use 'wx' unit so that they will look the same size on different screen sizes. http://editor.weex.io/p/wqyfavor/scroller/commit/b0c0b0af634a221eb4746cab9d803da6 TODO 1. We should discuss the way proposed by me to support this feature. 2. After discussion, Android needs develop to support this feature which will be easy because the main changes are in WeexCore.
