Currently, I am working on a mobile application that is HTML5 cross-platform compatible. To design the app, I am utilizing Bootstrap 3, although it seems unrelated to the specific issue I am facing. Here's the problem at hand:
Within my application, there is a series of row divs, with each containing a col-xs-2 title div and a col-xs-10 content div. In the content div, I have manually inserted various width divs based on percentage values such as 20, 40, 60, 80, or 100%. Initially, everything functions perfectly until I switch the mobile device to landscape view. Oddly enough, on select devices (!), there exists a minute discrepancy of 1px between the width of a 40% div compared to the total width of two 20% divs. The calculation results in one 20% div being measured at 89px wide, while the 40% div is calculated at 179px when it should ideally be 178px.
This inconsistency has been quite bothersome for me, as it is crucial for all divs to align flawlessly. The presence of this 1px variance is truly frustrating, especially since it only manifests on specific devices (both Android and iOS). My assumption is that it could be attributed to actual display sizes, yet that doesn't fully explain why browsers seem to inaccurately compute 40% against 2 * 20%. As such, I am eager to hear your recommendations on resolving this issue.
Your insights and suggestions are greatly appreciated!