I'm working to show a h5 app on the native WebView, I't need to calculate the size of some DOM manual, based on the window.innerWidth and window.innerHeight.
On the top of the html file, I insert a meta tag: <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"> , I need this meta to help me scale the device pixel density, so that the font size and other details can looks well, I think that most mobile web use it, not only me.
Howerver, in Android5.1, maybe also some other versions below it, I got an unexpected result. I wrote some code to print the window.innerWidth per second:
``` javascript
var count = 0;
(function fn() { count++; printToMobile(count + "_w: " + window.innerWidth); setTimeout(fn, 1000); })();
```
What if print is:
1_w: 980
2_w: 640
(In other devices, such as iPhone and Android6+, it always print the same value, like 1_w: 640, 2_w: 640, ...)
You can see that, in Android5.0, the value of window.innerWidth should changed with time! If I removed the viewport meta, it will not changed, and always be 980, but the font will looks so small, because it shrink the hole web to fit the mobile screen directly.
I feel that there are a period of time delay, before the webview scale to the correct size. and this cause a lot of promble, because my code need to calculate the size of some divs and images, and placed them to the suitable position.
I also found some information from here , and follow it, I try to removed the width=device-width or change it like width=device-height, but they all doesn't work. I'm really need someones help, thanks.
Aucun commentaire:
Enregistrer un commentaire