Struggling to optimize my web application for mobile devices, I've encountered challenges with consistent display across different browsers. My idea is to utilize device capability detection to adjust widths and font sizes dynamically based on screen size. However, it seems that mobile browsers don't interpret CSS widths in the same way as screen width—leading to discrepancies. For instance, on an iPhone with a 320px screen width, a body tag set at 320px wide only occupies a small portion of the page. Without a clear reference point, it's difficult to establish specific guidelines like "Set font size to 16px on a 320px wide screen." Is there a standard method or calculation incorporating various device capabilities to accurately determine browser width in CSS? Any advice would be greatly appreciated.
Thanks,
Mike