| <!DOCTYPE html> |
| <html lang="en-US"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Fit for multi-size screens | WEEX</title> |
| <meta name="description" content="Weex"> |
| <link rel="icon" href="//gw.alicdn.com/tps/TB1XNqxPXXXXXcSXVXXXXXXXXXX-64-63.png"> |
| <script src="//g.alicdn.com/alilog/mlog/aplus_v2.js"></script> |
| <meta name="data-spm" dataSpmProtocol="i" content="a2c7j"> |
| <meta name="aplus-ajax" content="chksum"> |
| <meta name="aplus-waiting" content="MAN"> |
| <meta name="google-site-verification" content="FbH8DPHpxdDJlfkKLKXuXWOu69DI8ZRRP8O2Phg8UKw"> |
| <meta name="baidu-site-verification" content="WRr1iWvsYK"> |
| |
| <link rel="preload" href="/assets/css/styles.0ff943f0.css" as="style"><link rel="preload" href="/assets/js/app.0ff943f0.js" as="script"><link rel="preload" href="/assets/js/88.e9171a32.js" as="script"><link rel="prefetch" href="/assets/css/1.styles.aa72e838.css"><link rel="prefetch" href="/assets/css/10.styles.1fff5b86.css"><link rel="prefetch" href="/assets/css/11.styles.a03faa50.css"><link rel="prefetch" href="/assets/css/2.styles.fc5d9892.css"><link rel="prefetch" href="/assets/css/21.styles.9ebad2b1.css"><link rel="prefetch" href="/assets/css/3.styles.6b94323a.css"><link rel="prefetch" href="/assets/css/36.styles.6dbb9d8c.css"><link rel="prefetch" href="/assets/css/4.styles.706a5607.css"><link rel="prefetch" href="/assets/css/7.styles.469d3b64.css"><link rel="prefetch" href="/assets/css/8.styles.b36167bf.css"><link rel="prefetch" href="/assets/css/9.styles.5bed6ebe.css"><link rel="prefetch" href="/assets/js/10.1fff5b86.js"><link rel="prefetch" href="/assets/js/100.09076a87.js"><link rel="prefetch" href="/assets/js/101.71fa3538.js"><link rel="prefetch" href="/assets/js/102.8a9926d6.js"><link rel="prefetch" href="/assets/js/103.d6c3649e.js"><link rel="prefetch" href="/assets/js/104.adb2425b.js"><link rel="prefetch" href="/assets/js/105.a063ca34.js"><link rel="prefetch" href="/assets/js/106.620e227f.js"><link rel="prefetch" href="/assets/js/107.1c97d156.js"><link rel="prefetch" href="/assets/js/108.d1f236a9.js"><link rel="prefetch" href="/assets/js/109.10a909cc.js"><link rel="prefetch" href="/assets/js/11.a03faa50.js"><link rel="prefetch" href="/assets/js/110.6f9200c8.js"><link rel="prefetch" href="/assets/js/111.9c1831b3.js"><link rel="prefetch" href="/assets/js/112.e5c0d546.js"><link rel="prefetch" href="/assets/js/113.b1c17feb.js"><link rel="prefetch" href="/assets/js/114.c24b95ed.js"><link rel="prefetch" href="/assets/js/115.d7e38c3b.js"><link rel="prefetch" href="/assets/js/116.1aaa95ab.js"><link rel="prefetch" href="/assets/js/117.1a9e5539.js"><link rel="prefetch" href="/assets/js/118.8d915477.js"><link rel="prefetch" href="/assets/js/119.77f0a126.js"><link rel="prefetch" href="/assets/js/12.16a9b730.js"><link rel="prefetch" href="/assets/js/120.3cf0ba10.js"><link rel="prefetch" href="/assets/js/121.47fefbf1.js"><link rel="prefetch" href="/assets/js/122.3dd022e8.js"><link rel="prefetch" href="/assets/js/123.84abc63f.js"><link rel="prefetch" href="/assets/js/124.2568e233.js"><link rel="prefetch" href="/assets/js/125.5b665f24.js"><link rel="prefetch" href="/assets/js/126.25b58a0a.js"><link rel="prefetch" href="/assets/js/127.d62a58c6.js"><link rel="prefetch" href="/assets/js/128.e5774a02.js"><link rel="prefetch" href="/assets/js/129.9a813c06.js"><link rel="prefetch" href="/assets/js/13.f8bde866.js"><link rel="prefetch" href="/assets/js/130.edddc316.js"><link rel="prefetch" href="/assets/js/131.760aa65c.js"><link rel="prefetch" href="/assets/js/132.559d5ba7.js"><link rel="prefetch" href="/assets/js/133.cbdd35c7.js"><link rel="prefetch" href="/assets/js/134.c02d92e1.js"><link rel="prefetch" href="/assets/js/135.e6d5496a.js"><link rel="prefetch" href="/assets/js/136.8826af60.js"><link rel="prefetch" href="/assets/js/137.28b4573d.js"><link rel="prefetch" href="/assets/js/138.d370fc15.js"><link rel="prefetch" href="/assets/js/139.8d9150fc.js"><link rel="prefetch" href="/assets/js/14.a98602cc.js"><link rel="prefetch" href="/assets/js/140.f0a9b5e1.js"><link rel="prefetch" href="/assets/js/141.297fa6fe.js"><link rel="prefetch" href="/assets/js/142.82bbcbaa.js"><link rel="prefetch" href="/assets/js/143.2d1ed3b2.js"><link rel="prefetch" href="/assets/js/144.69a9bc6a.js"><link rel="prefetch" href="/assets/js/145.74d52c12.js"><link rel="prefetch" href="/assets/js/146.12ecdaf4.js"><link rel="prefetch" href="/assets/js/147.daad4b96.js"><link rel="prefetch" href="/assets/js/148.bb356182.js"><link rel="prefetch" href="/assets/js/149.56fdaace.js"><link rel="prefetch" href="/assets/js/15.ea6e5024.js"><link rel="prefetch" href="/assets/js/150.ee9c4994.js"><link rel="prefetch" href="/assets/js/151.2feae618.js"><link rel="prefetch" href="/assets/js/152.c7703521.js"><link rel="prefetch" href="/assets/js/153.3b555eab.js"><link rel="prefetch" href="/assets/js/154.c6329253.js"><link rel="prefetch" href="/assets/js/155.334c4ea4.js"><link rel="prefetch" href="/assets/js/156.1a29657f.js"><link rel="prefetch" href="/assets/js/157.ba8f07bc.js"><link rel="prefetch" href="/assets/js/158.a60a60ba.js"><link rel="prefetch" href="/assets/js/159.9ce96d49.js"><link rel="prefetch" href="/assets/js/16.14acc638.js"><link rel="prefetch" href="/assets/js/160.2a970224.js"><link rel="prefetch" href="/assets/js/161.a26e2b53.js"><link rel="prefetch" href="/assets/js/162.73535662.js"><link rel="prefetch" href="/assets/js/163.7518a0a5.js"><link rel="prefetch" href="/assets/js/164.17367778.js"><link rel="prefetch" href="/assets/js/165.46c8f055.js"><link rel="prefetch" href="/assets/js/166.1cc22037.js"><link rel="prefetch" href="/assets/js/167.3fbcb5c6.js"><link rel="prefetch" href="/assets/js/168.a3f80f1e.js"><link rel="prefetch" href="/assets/js/169.a6565c29.js"><link rel="prefetch" href="/assets/js/17.d6f2f3b8.js"><link rel="prefetch" href="/assets/js/170.566ddeda.js"><link rel="prefetch" href="/assets/js/171.4fd97bee.js"><link rel="prefetch" href="/assets/js/172.5295c6b9.js"><link rel="prefetch" href="/assets/js/173.ff25fd05.js"><link rel="prefetch" href="/assets/js/174.22ea6a1b.js"><link rel="prefetch" href="/assets/js/175.c6a04367.js"><link rel="prefetch" href="/assets/js/176.d3810924.js"><link rel="prefetch" href="/assets/js/177.facd2802.js"><link rel="prefetch" href="/assets/js/178.f4c6fbe9.js"><link rel="prefetch" href="/assets/js/179.1a3a2c12.js"><link rel="prefetch" href="/assets/js/18.83f6b39a.js"><link rel="prefetch" href="/assets/js/180.b54c8e90.js"><link rel="prefetch" href="/assets/js/181.88495b4c.js"><link rel="prefetch" href="/assets/js/182.8341d23c.js"><link rel="prefetch" href="/assets/js/183.332bcfe2.js"><link rel="prefetch" href="/assets/js/184.d8996a56.js"><link rel="prefetch" href="/assets/js/185.b8584f07.js"><link rel="prefetch" href="/assets/js/186.fa89e23f.js"><link rel="prefetch" href="/assets/js/187.90340eeb.js"><link rel="prefetch" href="/assets/js/188.efe631f8.js"><link rel="prefetch" href="/assets/js/189.72897b1a.js"><link rel="prefetch" href="/assets/js/19.94f071c0.js"><link rel="prefetch" href="/assets/js/190.1ec691ee.js"><link rel="prefetch" href="/assets/js/2.fc5d9892.js"><link rel="prefetch" href="/assets/js/20.13f7bbff.js"><link rel="prefetch" href="/assets/js/21.9ebad2b1.js"><link rel="prefetch" href="/assets/js/22.764b643d.js"><link rel="prefetch" href="/assets/js/23.f533737e.js"><link rel="prefetch" href="/assets/js/24.4eaa533c.js"><link rel="prefetch" href="/assets/js/25.e9877e57.js"><link rel="prefetch" href="/assets/js/26.8905d6a0.js"><link rel="prefetch" href="/assets/js/27.b199a955.js"><link rel="prefetch" href="/assets/js/28.524af0cf.js"><link rel="prefetch" href="/assets/js/29.b772949f.js"><link rel="prefetch" href="/assets/js/3.6b94323a.js"><link rel="prefetch" href="/assets/js/30.f5bcac64.js"><link rel="prefetch" href="/assets/js/31.c55e03aa.js"><link rel="prefetch" href="/assets/js/32.e575600a.js"><link rel="prefetch" href="/assets/js/33.3fff5656.js"><link rel="prefetch" href="/assets/js/34.82598567.js"><link rel="prefetch" href="/assets/js/35.8e1290ba.js"><link rel="prefetch" href="/assets/js/36.6dbb9d8c.js"><link rel="prefetch" href="/assets/js/37.d27fdc88.js"><link rel="prefetch" href="/assets/js/38.f8fc7b20.js"><link rel="prefetch" href="/assets/js/39.bf967d40.js"><link rel="prefetch" href="/assets/js/4.706a5607.js"><link rel="prefetch" href="/assets/js/40.e1864fd6.js"><link rel="prefetch" href="/assets/js/41.61bd3b64.js"><link rel="prefetch" href="/assets/js/42.34d8d61d.js"><link rel="prefetch" href="/assets/js/43.1aee493f.js"><link rel="prefetch" href="/assets/js/44.22177e9b.js"><link rel="prefetch" href="/assets/js/45.5c743d2f.js"><link rel="prefetch" href="/assets/js/46.4feffac9.js"><link rel="prefetch" href="/assets/js/47.367f9103.js"><link rel="prefetch" href="/assets/js/48.0c246d45.js"><link rel="prefetch" href="/assets/js/49.ee354be9.js"><link rel="prefetch" href="/assets/js/5.7d9779f7.js"><link rel="prefetch" href="/assets/js/50.bd81c7f0.js"><link rel="prefetch" href="/assets/js/51.a5f432dd.js"><link rel="prefetch" href="/assets/js/52.537aded4.js"><link rel="prefetch" href="/assets/js/53.84814584.js"><link rel="prefetch" href="/assets/js/54.5f780e97.js"><link rel="prefetch" href="/assets/js/55.9d44c91d.js"><link rel="prefetch" href="/assets/js/56.fc164b43.js"><link rel="prefetch" href="/assets/js/57.959b2d44.js"><link rel="prefetch" href="/assets/js/58.bd5c38e0.js"><link rel="prefetch" href="/assets/js/59.3eaece52.js"><link rel="prefetch" href="/assets/js/6.49a49457.js"><link rel="prefetch" href="/assets/js/60.4b8cb735.js"><link rel="prefetch" href="/assets/js/61.b54b9195.js"><link rel="prefetch" href="/assets/js/62.0116614c.js"><link rel="prefetch" href="/assets/js/63.85b1247d.js"><link rel="prefetch" href="/assets/js/64.8f1be6b5.js"><link rel="prefetch" href="/assets/js/65.6a241647.js"><link rel="prefetch" href="/assets/js/66.08c8bd13.js"><link rel="prefetch" href="/assets/js/67.002e0071.js"><link rel="prefetch" href="/assets/js/68.6c6a7c94.js"><link rel="prefetch" href="/assets/js/69.64d90e5d.js"><link rel="prefetch" href="/assets/js/7.469d3b64.js"><link rel="prefetch" href="/assets/js/70.b2c287c9.js"><link rel="prefetch" href="/assets/js/71.b7ad1135.js"><link rel="prefetch" href="/assets/js/72.7391b5c2.js"><link rel="prefetch" href="/assets/js/73.c5c77d81.js"><link rel="prefetch" href="/assets/js/74.96f80ffd.js"><link rel="prefetch" href="/assets/js/75.2920c7b7.js"><link rel="prefetch" href="/assets/js/76.a90bd3c9.js"><link rel="prefetch" href="/assets/js/77.3a0eeccd.js"><link rel="prefetch" href="/assets/js/78.6791678c.js"><link rel="prefetch" href="/assets/js/79.8b0c78e4.js"><link rel="prefetch" href="/assets/js/8.b36167bf.js"><link rel="prefetch" href="/assets/js/80.2641b89d.js"><link rel="prefetch" href="/assets/js/81.03d1925e.js"><link rel="prefetch" href="/assets/js/82.71061708.js"><link rel="prefetch" href="/assets/js/83.df220a8f.js"><link rel="prefetch" href="/assets/js/84.99fbef8f.js"><link rel="prefetch" href="/assets/js/85.dee8bcae.js"><link rel="prefetch" href="/assets/js/86.5200e4ce.js"><link rel="prefetch" href="/assets/js/87.96df0d82.js"><link rel="prefetch" href="/assets/js/89.53987bbc.js"><link rel="prefetch" href="/assets/js/9.5bed6ebe.js"><link rel="prefetch" href="/assets/js/90.8da0ff06.js"><link rel="prefetch" href="/assets/js/91.4bcce2cd.js"><link rel="prefetch" href="/assets/js/92.aca18707.js"><link rel="prefetch" href="/assets/js/93.93fdf568.js"><link rel="prefetch" href="/assets/js/94.e893b256.js"><link rel="prefetch" href="/assets/js/95.cb1d62b6.js"><link rel="prefetch" href="/assets/js/96.5529545c.js"><link rel="prefetch" href="/assets/js/97.d01eda68.js"><link rel="prefetch" href="/assets/js/98.384bebd6.js"><link rel="prefetch" href="/assets/js/99.fa349b8f.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.aa72e838.js"> |
| <link rel="stylesheet" href="/assets/css/styles.0ff943f0.css"> |
| </head> |
| <body> |
| <div id="app" data-server-rendered="true"><div class="theme-container vuepress-theme-fast"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/" class="home-link router-link-active"><img src="/logo@2x.svg" alt="WEEX" class="logo"></a><span class="version"><a href="/download/download.html" class="version-bg"><img src="/assets/img/version-bg.ab65ded9.svg" alt="v0.28"><span class="version-no">v0.28</span></a></span><div class="links"><form id="search-form" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form><nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/guide/advanced/multi-size-screen.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/guide/advanced/multi-size-screen.html" class="nav-link">简体中文</a></li></ul></div></div></nav><a href="https://github.com/apache/incubator-weex" target="_blank" rel="noopener noreferrer" class="repo-link"><img src="/assets/img/github.7cb484a9.svg" alt="github" class="github-icon"></a></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">Guide</a></div><div class="nav-item"><a href="/docs/" class="nav-link">Docs</a></div><div class="nav-item"><a href="/tools/" class="nav-link">Third Party Tools</a></div><div class="nav-item"><a href="/download/" class="nav-link">Download</a></div><div class="nav-item"><a href="/community/" class="nav-link">Community</a></div><div class="nav-item"><a href="/blog/" class="nav-link">Blog</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Languages</span><span class="arrow right"></span></a><ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----><a href="/guide/advanced/multi-size-screen.html" class="nav-link router-link-exact-active router-link-active">English</a></li><li class="dropdown-item"><!----><a href="/zh/guide/advanced/multi-size-screen.html" class="nav-link">简体中文</a></li></ul></div></div></nav><ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>Getting Started</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/introduction.html" class="sidebar-link">Introduction</a></li><li><a href="/guide/front-end-frameworks.html" class="sidebar-link">Front-End Frameworks</a></li><li><a href="/guide/platform-difference.html" class="sidebar-link">Platform Difference</a></li><li><a href="/guide/use-vue-in-weex.html" class="sidebar-link">Use Vue in Weex</a></li><li><a href="/guide/use-rax-in-weex.html" class="sidebar-link">Use Rax in Weex</a></li><li><a href="/guide/playground.html" class="sidebar-link">Playground App</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Develop</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/develop/setup-develop-environment.html" class="sidebar-link">Setup Develop Environment</a></li><li><a href="/guide/develop/create-a-new-app.html" class="sidebar-link">Create a New App</a></li><li><a href="/guide/develop/weex_cli.html" class="sidebar-link">Weex CLI</a></li><li><a href="/guide/develop/integrate-to-android-app.html" class="sidebar-link">Integrate to Android</a></li><li><a href="/guide/develop/integrate-to-iOS-app.html" class="sidebar-link">Integrate to iOS</a></li><li><a href="/guide/develop/weex_error_code.html" class="sidebar-link">WeexErrorCode</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Debug</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/debug/integrate-devtool-to-android.html" class="sidebar-link">Integrate Devtool to Android</a></li><li><a href="/guide/debug/integrate-devtool-to-ios.html" class="sidebar-link">Integrate Devtool to iOS</a></li><li><a href="/guide/debug/debug.html" class="sidebar-link">Debug</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Extend</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/extend/extend-android.html" class="sidebar-link">Extend Android</a></li><li><a href="/guide/extend/extend-ios.html" class="sidebar-link">Extend iOS</a></li><li><a href="/guide/extend/extend-ios-with-swift.html" class="sidebar-link">Extend iOS with Swift</a></li><li><a href="/guide/extend/extend-web.html" class="sidebar-link">Extend Web Renderer</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Advanced</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/advanced/asset-path.html" class="sidebar-link">Asset Path</a></li><li><a href="/guide/advanced/downgrade.html" class="sidebar-link">Downgrade</a></li><li><a href="/guide/advanced/use-vuex-and-vue-router.html" class="sidebar-link">Use Vuex and vue-router</a></li><li><a href="/guide/advanced/multi-size-screen.html" class="active sidebar-link">Fit for multi-size screen</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/advanced/multi-size-screen.html#summary" class="sidebar-link">Summary</a></li><li class="sidebar-sub-header"><a href="/guide/advanced/multi-size-screen.html#how-weex-convert-a-css-style-ot-view-coordinate" class="sidebar-link">How Weex convert a CSS style ot view coordinate</a></li><li class="sidebar-sub-header"><a href="/guide/advanced/multi-size-screen.html#why-weex-does-not-support-orientation-switch" class="sidebar-link">Why Weex does not support orientation switch</a></li><li class="sidebar-sub-header"><a href="/guide/advanced/multi-size-screen.html#interface-for-screen" class="sidebar-link">Interface for screen</a></li><li class="sidebar-sub-header"><a href="/guide/advanced/multi-size-screen.html#scenarios" class="sidebar-link">Scenarios</a></li></ul></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Contribute</span><!----></p><ul class="sidebar-group-items"><li><a href="/guide/contribute/how-to-contribute.html" class="sidebar-link">Join Weex community</a></li><li><a href="/guide/contribute/thanks.html" class="sidebar-link">Thanks</a></li></ul></div></li></ul></div><div class="page"><div class="content"><h2 id="summary"><a href="#summary" class="header-anchor">#</a> Summary</h2><p>In this article, we demonstrate how to fit Weex pages for different or changable screen sizes such as orientation switches.</p><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>iOS only,Android not support yet</p></div><h2 id="how-weex-convert-a-css-style-ot-view-coordinate"><a href="#how-weex-convert-a-css-style-ot-view-coordinate" class="header-anchor">#</a> How Weex convert a CSS style ot view coordinate</h2><p>Take iOS as example, when your application starts up, Weex acquires current device screen width as global variable. On iOS, this value is screen physical pixels divided by screen scale. For iPhone6, this value is 375.</p><div class="language-C extra-class"><pre class="language-c"><code>@implementation WXCoreBridge |
| |
| <span class="token operator">+</span> <span class="token punctuation">(</span><span class="token keyword">void</span><span class="token punctuation">)</span>install |
| <span class="token punctuation">{</span> |
| <span class="token keyword">static</span> dispatch_once_t onceToken<span class="token punctuation">;</span> |
| <span class="token function">dispatch_once</span><span class="token punctuation">(</span><span class="token operator">&</span>onceToken<span class="token punctuation">,</span> <span class="token operator">^</span><span class="token punctuation">{</span> |
| WeexCore<span class="token operator">::</span>WXCoreEnvironment<span class="token operator">*</span> env <span class="token operator">=</span> WeexCore<span class="token operator">::</span>WXCoreEnvironment<span class="token operator">::</span><span class="token function">getInstance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| env<span class="token operator">-></span><span class="token function">SetPlatform</span><span class="token punctuation">(</span>OS_iOS<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| env<span class="token operator">-></span><span class="token function">AddOption</span><span class="token punctuation">(</span><span class="token string">"scale"</span><span class="token punctuation">,</span> <span class="token string">"1"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| CGSize screenSize <span class="token operator">=</span> <span class="token punctuation">[</span>UIScreen mainScreen<span class="token punctuation">]</span><span class="token punctuation">.</span>bounds<span class="token punctuation">.</span>size<span class="token punctuation">;</span> |
| env<span class="token operator">-></span><span class="token function">SetDeviceWidth</span><span class="token punctuation">(</span>std<span class="token operator">::</span><span class="token function">to_string</span><span class="token punctuation">(</span>screenSize<span class="token punctuation">.</span>width<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| env<span class="token operator">-></span><span class="token function">SetDeviceHeight</span><span class="token punctuation">(</span>std<span class="token operator">::</span><span class="token function">to_string</span><span class="token punctuation">(</span>screenSize<span class="token punctuation">.</span>height<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> |
| <span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span> |
| <span class="token punctuation">}</span> |
| </code></pre></div><p>When every WXSDKInstance is created, it's default viewPortWidth is 750px.</p><div class="language-C extra-class"><pre class="language-c"><code><span class="token comment">// The default screen width which helps us to calculate the real size or scale in different devices.</span> |
| <span class="token keyword">static</span> <span class="token keyword">const</span> CGFloat WXDefaultScreenWidth <span class="token operator">=</span> <span class="token number">750.0</span><span class="token punctuation">;</span> |
| </code></pre></div><p>If you set a CSS style as "375px", in Weex, this value is automatically converted to a UIKit system value considering current screen width and the current instance's viewPortWidth.</p><div class="language-C extra-class"><pre class="language-c"><code><span class="token function">dimension</span><span class="token punctuation">(</span>UIKit<span class="token punctuation">)</span> <span class="token operator">=</span> <span class="token function">dimensionPx</span><span class="token punctuation">(</span>CSS<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token function">viewPortWidth</span><span class="token punctuation">(</span>instance<span class="token punctuation">)</span> <span class="token operator">*</span> globalScreenWidth |
| </code></pre></div><p>We get: |
| dimension(UIKit) = 375 / 750 * 375 = 187.5</p><p>After that, Weex use value 187.5 for layout and set the final value after layout to an iOS UIView, no more conversion.</p><h2 id="why-weex-does-not-support-orientation-switch"><a href="#why-weex-does-not-support-orientation-switch" class="header-anchor">#</a> Why Weex does not support orientation switch</h2><p>As mentioned above, Weex converts a raw CSS style value to UI system's unit and dropped the raw style value. This is for historical reason, and could save a lot of memory for huge and complcated pages.</p><p>At the same time, Weex does not support style value as percentage. Massive existing pages use 750px as the default viewPortWidth, and all sub elements in the page use coordinate values relative to 750 which is treated as full screen width.</p><p>When screen rotated, as for iPhone6, the "width * height" would be "667 * 375". We need raw style value to calculate the new value for layout and UIView. But because there are no raw style values, we cannot proceed.</p><p>For style value "375px" after rotation, the UIKit value would be:</p><p>dimension(UIKit) = 375 / 750 * 667 = 333.5</p><p>You can see that 333.5 is still half the screen width.</p><h2 id="interface-for-screen"><a href="#interface-for-screen" class="header-anchor">#</a> Interface for screen</h2><p>We provide a series of APIs to control layout parameter.</p><h3 id="_1-set-viewportwidth-of-a-page"><a href="#_1-set-viewportwidth-of-a-page" class="header-anchor">#</a> 1. Set viewPortWidth of a page</h3><h4 id="a-use-meta-module"><a href="#a-use-meta-module" class="header-anchor">#</a> a. Use Meta Module</h4><div class="language-Javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> meta <span class="token operator">=</span> weex<span class="token punctuation">.</span><span class="token function">requireModule</span><span class="token punctuation">(</span><span class="token string">'meta'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| meta<span class="token punctuation">.</span><span class="token function">setViewport</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| width<span class="token punctuation">:</span> <span class="token number">800</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h4 id="b-use-wxsdkinstance"><a href="#b-use-wxsdkinstance" class="header-anchor">#</a> b. Use WXSDKInstance</h4><ul><li>iOS:</li></ul><div class="language-Objective-C extra-class"><pre class="language-text"><code>WXSDKInstance* instance = [[WXSDKInstance alloc] init]; |
| [instance setViewportWidth:800.f]; |
| </code></pre></div><ul><li>Android:</li></ul><div class="language-Java extra-class"><pre class="language-java"><code><span class="token class-name">WXSDKInstance</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WXSDKInstance</span><span class="token punctuation">(</span>mContext<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| instance<span class="token punctuation">.</span><span class="token function">setInstanceViewPortWidth</span><span class="token punctuation">(</span><span class="token number">800</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h3 id="_2-set-devicewidth-of-a-page"><a href="#_2-set-devicewidth-of-a-page" class="header-anchor">#</a> 2. Set deviceWidth of a page</h3><div class="danger custom-block"><p class="custom-block-title">WARNING</p><p>iOS only,Android not support yet</p></div><span class="badge warning top">v0.25+</span><h4 id="a-use-meta-module-2"><a href="#a-use-meta-module-2" class="header-anchor">#</a> a. Use Meta Module</h4><div class="language-Javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> meta <span class="token operator">=</span> weex<span class="token punctuation">.</span><span class="token function">requireModule</span><span class="token punctuation">(</span><span class="token string">'meta'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| meta<span class="token punctuation">.</span><span class="token function">setViewport</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| deviceWidth<span class="token punctuation">:</span> <span class="token number">375</span><span class="token punctuation">,</span> |
| deviceHeight<span class="token punctuation">:</span> <span class="token number">800</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h4 id="b-use-wxsdkinstance-2"><a href="#b-use-wxsdkinstance-2" class="header-anchor">#</a> b. Use WXSDKInstance</h4><div class="language-Objective-C extra-class"><pre class="language-text"><code>WXSDKInstance* instance = [[WXSDKInstance alloc] init]; |
| [instance setPageRequiredWidth:375.f height:800.f]; |
| </code></pre></div><h4 id="c-set-global-devicewidth"><a href="#c-set-global-devicewidth" class="header-anchor">#</a> c. Set global deviceWidth</h4><div class="language-Objective-C extra-class"><pre class="language-text"><code>[WXSDKEngine setGlobalDeviceSize:CGSizeMake([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; |
| </code></pre></div><h3 id="_3-let-a-page-reserve-all-raw-css-styles"><a href="#_3-let-a-page-reserve-all-raw-css-styles" class="header-anchor">#</a> 3. Let a page reserve all raw CSS styles</h3><span class="badge warning top">v0.25+</span><h4 id="a-use-meta-module-3"><a href="#a-use-meta-module-3" class="header-anchor">#</a> a. Use Meta Module</h4><div class="language-Javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> meta <span class="token operator">=</span> weex<span class="token punctuation">.</span><span class="token function">requireModule</span><span class="token punctuation">(</span><span class="token string">'meta'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| meta<span class="token punctuation">.</span><span class="token function">setViewport</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| reserveCssStyles<span class="token punctuation">:</span> <span class="token boolean">true</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h4 id="b-use-wxsdkinstance-3"><a href="#b-use-wxsdkinstance-3" class="header-anchor">#</a> b. Use WXSDKInstance</h4><ul><li>iOS:</li></ul><div class="language-Objective-C extra-class"><pre class="language-text"><code>WXSDKInstance* instance = [[WXSDKInstance alloc] init]; |
| [instance setPageKeepRawCssStyles]; |
| </code></pre></div><ul><li>Android:</li></ul><div class="language-Java extra-class"><pre class="language-java"><code><span class="token class-name">WXSDKInstance</span> instance <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WXSDKInstance</span><span class="token punctuation">(</span>mContext<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| instance<span class="token punctuation">.</span><span class="token function">setPageKeepRawCssStyles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h3 id="_4-force-the-page-to-relayout"><a href="#_4-force-the-page-to-relayout" class="header-anchor">#</a> 4. Force the page to relayout</h3><span class="badge warning top">v0.25+</span><ul><li>iOS:</li></ul><div class="language-Objective-C extra-class"><pre class="language-text"><code>[instance reloadLayout]; |
| </code></pre></div><ul><li>Android:</li></ul><div class="language-Java extra-class"><pre class="language-java"><code>instance<span class="token punctuation">.</span><span class="token function">reloadPageLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><h2 id="scenarios"><a href="#scenarios" class="header-anchor">#</a> Scenarios</h2><h3 id="_1-applications-that-do-not-support-screen-rotation"><a href="#_1-applications-that-do-not-support-screen-rotation" class="header-anchor">#</a> 1. Applications that do not support screen rotation</h3><p>If your app does not support screen rotation, you can ignore all issues above. When Weex starts up, it will automatically get current screen width and after that all pages will use this global value as default.</p><h3 id="_2-support-screen-rotation-for-a-specific-page"><a href="#_2-support-screen-rotation-for-a-specific-page" class="header-anchor">#</a> 2. Support screen rotation for a specific page</h3><span class="badge warning top">v0.25+</span><ol><li>Let the page reserve all CSS style values.</li><li>After screen rotation is done, use the code below to reset screen width for the page and trigger relayout.</li></ol><ul><li>iOS:</li></ul><div class="language-Objective-C extra-class"><pre class="language-text"><code>CGFloat w = [UIScreen mainScreen].bounds.size.width; |
| CGFloat h = [UIScreen mainScreen].bounds.size.height; |
| [_instance setPageRequiredWidth:w height:h]; |
| [_instance reloadLayout]; |
| </code></pre></div><ul><li>Android:</li></ul><div class="language-Java extra-class"><pre class="language-java"><code>instance<span class="token punctuation">.</span><span class="token function">resetDeviceDisplayOfPage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| instance<span class="token punctuation">.</span><span class="token function">reloadPageLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| </code></pre></div><p>You could use latest Playground to test the <a href="http://editor.weex.io/p/wqyfavor/scroller/commit/37810078ef963388b699b5ad7d5e9881" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><p>Remember to turn on screen rotation in control panel.</p><p><a href="https://img.alicdn.com/tfs/TB1gWiTcvWG3KVjSZPcXXbkbXXa-240-427.gif" target="_blank" rel="noopener noreferrer">image<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p><h3 id="_3-notice"><a href="#_3-notice" class="header-anchor">#</a> 3. Notice</h3><p>For styles that should not be affected by screen width and viewPortWidth, you should use 'wx' as unit.</p></div><div class="page-nav"><p class="inner"><span class="prev"> |
| ← |
| <a href="/guide/advanced/use-vuex-and-vue-router.html" class="prev"> |
| Use Vuex and vue-router |
| </a></span><span class="next"><a href="/guide/contribute/how-to-contribute.html"> |
| Join Weex community |
| </a> |
| → |
| </span></p></div><div class="page-edit"><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">12/10/2020</span></div><div class="edit-link"><a href="https://github.com/apache/incubator-weex-site/edit/master/docs/guide/advanced/multi-size-screen.md" target="_blank" rel="noopener noreferrer">Edit this page</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><a href="https://github.com/apache/incubator-weex-site/issues/new?body=https%3A%2F%2Fweex.io%2F" target="_blank" rel="noopener noreferrer" class="issueText">Suggest</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><div class="score"><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon">Excellent doc</span><span class="choice"><img src="https://img.alicdn.com/tfs/TB1h7TSqpYqK1RjSZLeXXbXppXa-20-18.svg" class="score-icon bad">Unusable doc</span></div></div><div class="license-wrap" style="display:none;"><footer class="footer-container" data-v-0ad13d84><div class="footer-body" data-v-0ad13d84><img src="/logo@2x.svg" class="logo" data-v-0ad13d84><img src="//img.alicdn.com/tfs/TB11BRiIW6qK1RjSZFmXXX0PFXa-365-365.png" class="apache" data-v-0ad13d84><div class="cols-container" data-v-0ad13d84><div class="col col-12" data-v-0ad13d84><h3 data-v-0ad13d84>Disclaimer</h3><p data-v-0ad13d84>Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the |
| Incubator. Incubation is required of all newly accepted projects until a further review indicates that the |
| infrastructure, communications, and decision making process have stabilized in a manner consistent with |
| other successful ASF projects. While incubation status is not necessarily a reflection of the completeness |
| or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.</p></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>ASF</dt><dd data-v-0ad13d84><a href="http://www.apache.org" target="_self" data-v-0ad13d84>Foundation</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/licenses/" target="_self" data-v-0ad13d84>License</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/events/current-event" target="_self" data-v-0ad13d84>Events</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/sponsorship.html" target="_self" data-v-0ad13d84>Sponsorship</a></dd><dd data-v-0ad13d84><a href="http://www.apache.org/foundation/thanks.html" target="_self" data-v-0ad13d84>Thanks</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Documentation</dt><dd data-v-0ad13d84><a href="/guide/develop/create-a-new-app.html" target="_self" data-v-0ad13d84>Quick start</a></dd><dd data-v-0ad13d84><a href="/guide/develop/setup-develop-environment.html" target="_self" data-v-0ad13d84>Developer guide</a></dd></dl></div><div class="col col-4" data-v-0ad13d84><dl data-v-0ad13d84><dt data-v-0ad13d84>Resources</dt><dd data-v-0ad13d84><a href="/blog/write-a-blog.html" target="_self" data-v-0ad13d84>Blog</a></dd><dd data-v-0ad13d84><a href="/community/" target="_self" data-v-0ad13d84>Community</a></dd><dd data-v-0ad13d84><a href="/guide/contribute/thanks.html" target="_self" data-v-0ad13d84>Thanks by Weex</a></dd><dd data-v-0ad13d84><a href="https://www.apache.org/security/" target="_self" data-v-0ad13d84>Security</a></dd></dl></div></div><div class="copyright" data-v-0ad13d84><span data-v-0ad13d84>Copyright © 2018-2019 The Apache Software Foundation. Apache and the Apache feather |
| logo are trademarks of The Apache Software Foundation.</span></div></div></footer></div></div><!----></div></div> |
| <script src="/assets/js/app.0ff943f0.js" defer></script><script src="/assets/js/88.e9171a32.js" defer></script> |
| </body> |
| </html> |
