如何使用 CSS 媒体查询检测 Android 设备的默认字体大小？

Question

In Android, Settings > Accessibility > Font Size the user can set font size between "Small", "Default", "Large", "Largest". Among other things, this setting affects default font size of HTML content in WebViews.

I've developed my layouts to look well with the default font size. Setting font size to "Largest" causes text to get cut off in some places, a horizontal scrollbar appear on others etc. In these cases I can use an alternative layout (for example, stack things vertically instead of horizontally), but I'm not sure how to detect which layout to use.

Ideally, I would use CSS media queries. Something like:

#foo {
    display: flex;
}

@media (min-width: 360px) {
    #foo {
        /* If at least 360px available, use a horizontal layout */
        flex-direction: row;
    }
}

Problem is, the 360px breakpoint isn't affected by the Font Size setting on the device (which makes sense). I've also tried other measurement units: rem, ch, cm – but none of them seemed to take into account device's font size.

I've thought about doing something like this on page load:

• display a line of constant text (say, "0000000000") on the screen
• measure it in JS
• if the measured width / device width ratio is above some set constant, switch to the alternative layout

But this approach would add complexity, delay and repaints and flicker on page load.

Is there a way to take device font size in account in CSS (media queries or otherwise)?

Answer 1

Short Answer

No, you cannot do this just using CSS. However you can minimise impact using a method similar to the one you mentioned in your question (measuring font size and adjusting layout accordingly).

Long Answer

You cannot do this with just CSS, however it is possible to have a performant website without repaints and fall-back to your default styles for no JS .

There is one downside to this method, you do end up injecting a style sheet into the page which will affect first contentful paint times. However bear in mind that this is essentially the same as having a matching media query (so in reality, there is no difference between this and a media query other than it relies on JavaScript).

You can mitigate this by inlining the relevant styles but obviously that carries a page weight cost. You will have to decide which is the greater sin!

The solution is quite simple.

(1) Work out the user's font size using the method similar to the one you described.

(2) Load in conditional CSS that overrides the key layout options as you desire.

(2a) Alternatively add a class to the body and change the layout based on that from styles within existing style sheets or inlined in the document if above the fold.

1. Work out the user's font size

You can do this in vanilla JS right within the header of the page as an inline script so it does not delay anything (other than parsing the script) and it will still be performant.

Try the below example with you font size set to "medium" first, then set your font-size to "extra large" and run the script again. Your font size should show as 16px and 24px respectively.

 var el = document.getElementById('foo'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = style; console.log(style)

 <div id="foo">a</div>

We now have a font size that is relative to the user's scaling.

We can further improve this by simply dividing the resultant font size by 16 (default size) to get a %age scale.

 var el = document.getElementById('foo'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = style; var fontSizePercentage = parseFloat(style) / 16 * 100; console.log(style, fontSizePercentage + "%");

 <div id="foo">a</div>

2. Load in conditional CSS

Now that we know if the font size has been scaled by the user we simply conditionally load CSS.

To do this we need a simple JavaScript check

//set to whatever criteria you need, if your site still works on "large" font size and only needs adjustment at "extra large" then use 124 etc.
if(fontSizePercentage > 100){
    //add the CSS
}

In the below example I have 3 columns that turn into 3 rows to demonstrate how font size dictates which styles to apply.

Please note to simulate a dynamically added CSS file I added some inline CSS code that gets written to a style sheet, you would obviously just add a style sheet (I have included a function to do this and just commented out where that function is called).

 var el = document.getElementById('foo'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = style; var fontSizePercentage = parseFloat(style) / 16 * 100; el.remove(); console.log(fontSizePercentage); //this is just to simulate adding CSS, you would obviously import a style sheet properly here. I have put the proper function further down. var normal = `.col3{ float: left; width: 32%; margin-right: 1%; } ` var bigger = `.col3{ float: left; width: 100%; } ` var styleSheet = document.createElement("style"); styleSheet.type = "text/css"; if(fontSizePercentage > 100){ styleSheet.innerText = bigger; }else{ styleSheet.innerText = normal; } document.head.appendChild(styleSheet); ////actual style sheet code///// function addCss(fileName) { var head = document.head; var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = fileName; head.appendChild(link); } if(fontSizePercentage > 100){ //addCss('url-to-large-font-size-layout'); }else{ //addCss('url-to-normal-font-size-layout'); }

 <div id="foo">a</div> <div class="col3">column</div> <div class="col3">column</div> <div class="col3">column</div>

You will see from the example we add the stylesheet dynamically, choosing between two style sheets in the example. In reality you would probably only need to do the check for the requirement to use the large fonts stylesheet as your standard font size will be covered by your main CSS.

pros This method effectively is the same as a 'font size media query' and carries a tiny JavaScript overhead.

cons If you are bothered by repaints then performance is obviously important to you, this method adds an additional request and can delay First Contentful Paint / Initial page rendering for "above the fold content".

Because of this I offer a second suggestion:

2a. Add a class to the body.

Use exactly the same method as above but instead of inserting a style sheet simply use the check for font size to add a class to the body on page load.

The simply include the styles within your current style sheets but with the additional body class as a qualifier.

 var el = document.getElementById('foo'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = style; var fontSizePercentage = parseFloat(style) / 16 * 100; el.remove(); var bod = document.getElementById('simulated-body'); if(fontSizePercentage > 100){ bod.classList.add('large-font-layout'); } console.log(fontSizePercentage);

 .col3{ float: left; width: 32%; margin-right: 1%; }.large-font-layout.col3{ float: left; width: 100%; }

 <div id="simulated-body"> <div id="foo">a</div> <div class="col3">column</div> <div class="col3">column</div> <div class="col3">column</div> </div>

pros this doesn't add any extra requests, should not affect your page paint. Generally this option will be preferable to the first option as you should only need to override a handful of CSS classes so the added weight is negligible.

cons - adds extra weight to your CSS.

Conclusion

Somebody should add a "user font size" media query:-P

Seriously though I would go with the (2a) option I gave you and inline your critical CSS . If you are changing more than 100 classes in your CSS (and so CSS weight becomes a problem) then something is wrong with your design so the speed difference will be negligible. Couple that with the fact that the JS is less than 1kb and it will not affect your paints and it is a simple but effective solution to your problem.

Bonus info for option 2

As an additional thought you can combine option 2 with checking the screen width to really minimise the amount of data sent down the wire. However this then starts adding considerable complexity which is something you said you wanted to avoid. I have included it here for completeness.

 function getFontSizePercentage(){ var el = document.getElementById('foo'); var style = window.getComputedStyle(el, null).getPropertyValue('font-size'); var fontSize = style; var fontSizePercentage = parseFloat(style) / 16 * 100; el.remove(); return fontSizePercentage; } function getPageWidth(){ return Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth ); } function addCSS(fileName) { var head = document.head; var link = document.createElement("link"); link.type = "text/css"; link.rel = "stylesheet"; link.href = fileName; head.appendChild(link); } var fontSizePercentage = getFontSizePercentage(); var pageWidth = getPageWidth(); var cssSize = "1920"; switch(true) { case (pageWidth < 1366): cssSize = "1366"; break; case (pageWidth < 728): var cssSize = "728"; break; default: cssSize = "1920"; } var cssPath = "styles/screen-width-" + cssSize + "-font-size-adjust"; if(fontSizePercentage > 100){ console.log("adding CSS for width: " + cssSize, cssPath); addCSS(cssPath); }else{ console.log("not adding CSS", cssPath); }

 <div id="foo">a</div>

Answer 2

you can use the VH (viewport height) or VW(viewport width) font-size measures and the font will resize based on % of device viewport for example:

1vh = 1% of viewport heigth 2vw = 2% of viewport width etc

If you are doing media selector you could as well use rem or px as font-size.

You will still have to add @media selector for different devices, keep in mind viewport is the actual size of a device screen, like 10inch screens will have a @media selector up to 1280px or bellow.

 /* please use caniuse.com for browser compatibility table*/ h1 { font-size: 2.5vw; } h2 { font-size: 2vw; } p { font-size: 12px; } @media only screen and (max-width:768px) { h1 { font-size: 5vw; } h2 { font-size: 4vw; } p { font-size: 18px; } }

 <h1>text</h1> <h2>text</h2> <p>some normal font controled by media query</p>

Answer 3

Is there a way to take device font size in account in CSS (media queries or otherwise)?

Media queries are used to set font size based on device width, not the contrary.

The unit you might use will always be based on the device width, not on the font size (as this can't be already defined at this point).

What you can do is, instead of defining the width of your columns based on percentage or using px units, you can set them on the base font size.

For instance, instead of

.flex-col {
  flex: 0 1 30%;
}

you may use

.flex-col {
  flex: 0 1 20rem;
}

The real problem are not your media queries but the fact that your containers are not defined in a responsive way (with both fix width and height for instance) causing cut off and scrollbars.