Background
A project of mine needs to embed a web app in mobile apps, both Android apps and iOS apps, the detail is mobile apps providing a small web view in somewhere of the app, the web view will contain a web app, the web app will be in a small state when its first be loaded. After users clicking navigation buttons, the web app will inform mobile apps to enlarge the web view, in the same time the web app will become a large web page.
Implementation
To let the web app adapt to different mobile devices, I adopted the responsive designs with CSS REMs. That is my script will set the root font size according to devices’ screen properties. Since the web app needs to be responsive also, its size can not be set to a specific value. After some round of testing, the solution is to set the web view’s size according to the web app’s ratio of its width and height.
Problem
The implementation described above works well in most of the mobile devices, but in some devices with old versions of operating system or abnormal screen ratio, the solution won’t work. After some sort of debugging, the problem has been targeted. The problem is in those devices, the API getBoundingClientRect will return values larger than the actual view, so the root font size will be set to a larger value, the result is the web app will be larger than the view and its can not be fit into the view, so the page crashes.
Solution
The problem caused by wrong values returned by getBoundingClientRect, to solve the problem, there must be existed a method to obtain correct values. Having mastered that knowledge, the eventual solution is letting both Android apps and iOS apps injecting a JavaScript method into the web view, the method will return actual size of the web view – the app knows it. After switching to that solution, the problem solved.
