media query for device text size

[joshkadis]

At least in my experience, web content is less likely to be designed for varying text size than app content is. So when sharing code between regular web and webviews, I've run into a few problems related to applying the device or app's text size to webview content

• Applying system text size setting to webview's font size
• Changing webview font size on the fly if system setting changes while a webview is in view
• Restyling webview layout to account for large text

The last one is the trickiest but I think a @media query or a similat at-rule would be a great way to address them. Here's an example: https://jsfiddle.net/8n5owzcp/8/

First, let's add the class withsystemtextsize to div.container. This simulates the what would happen if the webview inherits only the system text size of 175%. The heading overflows its container.

Next, let's add the class withmediaquery to div.container. Now we're also simulating what we could do with a media query for the text size. Changing the layout from a row to a column lets us accommodate the heading without overflowing the container.