Currently in the process of developing a desktop site () that should function optimally on mobile browsers without the need for a separate mobile version. While mobile Safari scales up fonts in large text blocks, tables used for content are causing some issues. The fonts in wide columns scale up for readability, but those in narrower columns remain unchanged.
To ensure consistency in rendering tables, I have implemented the following workaround:
@media only screen and (max-device-width: 480px) {
#container td { -webkit-text-size-adjust:100% }}
This solution works well for pages like:
However, it is not ideal for tables containing event details, such as:
In scenarios like the latter example, I would prefer all fonts to be scaled up uniformly for consistency across the page instead of just focusing on one column.
Is there a way to achieve this level of consistency?
Your help would be greatly appreciated.
Thank you, Dougie :)