You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by MrRaindrop <gi...@git.apache.org> on 2017/04/06 08:12:01 UTC
[GitHub] incubator-weex pull request #219: chang viewport adapting algorithm.
GitHub user MrRaindrop opened a pull request:
https://github.com/apache/incubator-weex/pull/219
chang viewport adapting algorithm.
# intro
Request to enable viewport adapting algorithm changing for weex-vue-render. The previous way to adapt different screens is by setting viewport meta in the head. The compatibility in some devices is un-tested and the implementation for this meta in some browsers is not so reliable. What's more, some user-defined components in this changed viewport environment is not working correctly, since those components assume current viewport is a more common value, like device-width, and they draw UI depending on this.
So this pr solved this problem by introducing realtime recalculation for component's styles, which are scaled-up/down value to adapt current device-width, to enable the consistency in all the devices with varies of screens. This pr also solve the problem that the scale values used in `dom.scrollToElement` and `animation.transition` wouldn't adapt to different screens.
This pr also enable runtime autoprefix for styles, which means users don't have to put `$processStyle` or `autoprefixer` in their vue-loader config. The render will do this for users automatically and they don't have to worry about it.
# changelog:
* change viewport adapting algorithm by recalculating styles during runtime.
* discard $processStyle and autoprefixer config for vue-loader.
* add test cases.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/MrRaindrop/incubator-weex 0.11-dev
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/incubator-weex/pull/219.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #219
----
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex pull request #219: chang viewport adapting algorithm.
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/incubator-weex/pull/219
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by MrRaindrop <gi...@git.apache.org>.
Github user MrRaindrop commented on the issue:
https://github.com/apache/incubator-weex/pull/219
@dongnaebi can you give me a simple demo to show this error with inline style ? I tested in a simple case and got no error found, maybe you have something not mentioned in this case to get this style computing error ? BTW, import src is not valid to use in weex, since it's not a scoped style. You can only use `<style scoped>` tag in weex.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by weex-bot <gi...@git.apache.org>.
Github user weex-bot commented on the issue:
https://github.com/apache/incubator-weex/pull/219
<!--
0 failure:
1 warning: These new JS file...
-->
<table>
<thead>
<tr>
<th width="50"></th>
<th width="100%" data-danger-table="true">Warnings</th>
</tr>
</thead>
<tbody><tr>
<td>:warning:</td>
<td>These new JS files do not have Flow enabled: build/webpack.test.web.config.js, flow-typed/npm/karma-rollup-preprocessor_vx.x.x.js, flow-typed/npm/karma-sinon-chai_vx.x.x.js, html5/render/vue/components/scrollable/list/style.js, html5/render/vue/core/index.js, html5/render/vue/core/style.js, html5/render/vue/modules/modal/style.js</td>
</tr>
</tbody>
</table>
<p align="right">
Generated by :no_entry_sign: <a href="http://github.com/danger/danger-js/">dangerJS</a>
</p>
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by dongnaebi <gi...@git.apache.org>.
Github user dongnaebi commented on the issue:
https://github.com/apache/incubator-weex/pull/219
OK,thanks,good man
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by dongnaebi <gi...@git.apache.org>.
Github user dongnaebi commented on the issue:
https://github.com/apache/incubator-weex/pull/219
here somthing I found.
my viewport is `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">`
if change it to 0.5,it's work fine,but `weex.config.env.deviceWidth` will be 1500,some calculations based on deviceWidth will be large.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by dongnaebi <gi...@git.apache.org>.
Github user dongnaebi commented on the issue:
https://github.com/apache/incubator-weex/pull/219
@MrRaindrop sorry,\u5f04\u53cd\u4e86\uff0cis `<style>` tag dose not computed.
it's not an error,is inconsistent performance.
I was test it in npm package v0.11.5:
http://dotwe.org/vue/cf99c75bbadfa61c4ae151b4c430ffb4
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by dongnaebi <gi...@git.apache.org>.
Github user dongnaebi commented on the issue:
https://github.com/apache/incubator-weex/pull/219
in `<style>` element,88px will computed to 44px in iPhone6.but inline-style dose not work,and import style like `<style src="../style/main.css"></style>` dose not work too.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by weex-bot <gi...@git.apache.org>.
Github user weex-bot commented on the issue:
https://github.com/apache/incubator-weex/pull/219
<table>
<thead>
<tr>
<th width="50"></th>
<th width="100%" data-danger-table="true" data-kind="Error">
4 Errors
</th>
</tr>
</thead>
<tbody>
<tr>
<td>:no_entry_sign:</td>
<td data-sticky="false"><strong><a href="https://github.com/MrRaindrop/incubator-weex/blob/b7b81f3e52822036f64ca6b27c6b0bbc0c64925f/ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L50">ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L50</a></strong>: incompatible pointer types sending \u2018NSNumber *\u2019 to parameter of type \u2018NSIndexPath * _Nullable\u2019 [-Werror,-Wincompatible-pointer-types] <br /><code>
[_headerToIndexTable setObject:@(idx) forKey:controller.headerComponent];
</code></td>
</tr>
<tr>
<td>:no_entry_sign:</td>
<td data-sticky="false"><strong><a href="https://github.com/MrRaindrop/incubator-weex/blob/b7b81f3e52822036f64ca6b27c6b0bbc0c64925f/ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L50">ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L50</a></strong>: incompatible pointer types sending \u2018WXHeaderComponent *\u2019 to parameter of type \u2018WXCellComponent * _Nullable\u2019 [-Werror,-Wincompatible-pointer-types] <br /><code>
[_headerToIndexTable setObject:@(idx) forKey:controller.headerComponent];
</code></td>
</tr>
<tr>
<td>:no_entry_sign:</td>
<td data-sticky="false"><strong><a href="https://github.com/MrRaindrop/incubator-weex/blob/b7b81f3e52822036f64ca6b27c6b0bbc0c64925f/ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L114">ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L114</a></strong>: incompatible pointer types sending \u2018WXHeaderComponent *\u2019 to parameter of type \u2018WXCellComponent * _Nullable\u2019 [-Werror,-Wincompatible-pointer-types] <br /><code>
NSNumber *index = [_headerToIndexTable objectForKey:header];
</code></td>
</tr>
<tr>
<td>:no_entry_sign:</td>
<td data-sticky="false"><strong><a href="https://github.com/MrRaindrop/incubator-weex/blob/b7b81f3e52822036f64ca6b27c6b0bbc0c64925f/ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L114">ios/sdk/WeexSDK/Sources/Component/Recycler/WXRecyclerDataController.m#L114</a></strong>: incompatible pointer types initializing \u2018NSNumber *\u2019 with an expression of type \u2018NSIndexPath * _Nullable\u2019 [-Werror,-Wincompatible-pointer-types] <br /><code>
NSNumber *index = [_headerToIndexTable objectForKey:header];
</code></td>
</tr>
</tbody>
</table>
<p align="right" data-meta="generated_by_danger">
Generated by :no_entry_sign: <a href="http://danger.systems/">danger</a>
</p>
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] incubator-weex issue #219: chang viewport adapting algorithm.
Posted by MrRaindrop <gi...@git.apache.org>.
Github user MrRaindrop commented on the issue:
https://github.com/apache/incubator-weex/pull/219
This branch has changed viewport adapting algorithm. So the npm version is out dated (BTW, the latest version on npm is `0.11.2`) when this branch is merged, and the device-width will be the viewport size consistently (e.g. 375 for iphone6).
@dongnaebi In your case I suggest you don't change your viewport. If you want to use a scale based on your design width, such as 750px, you can use `<meta name="weex-viewport" content="750">`. This would be ok.
You can specify your viewport width to 750px with `<meta name="weex-viewport" content="750">`. This meta works for all the `0.11.x` version of weex-vue-render, what is changed is the adapting algorithm. You shouldn't set the viewport meta as `device-width` and `xx-scale=1` since the `env.deviceWidth` and `env.deviceHeight` will be calculated relying on this. What you can change is the `weex-viewport` meta.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---