remark icon indicating copy to clipboard operation
remark copied to clipboard

Small screen font size inflation

Open gwmatthews opened this issue 5 years ago • 0 comments

I first noticed this issue with xaringan which is based on remark, but it is an issue here as well.

On small screens, like my Android mobile phone, the Chrome browser inflates small font sizes such that they overflow the viewable area of a slide. As an example, try viewing this slide: https://remarkjs.com/#5 on a mobile browser.

Here's what it looks like on my phone:

remark-js-android

In xaringan including the following in the css fixed the problem, and I imagine it might here too:

/*   prevent small screen font size inflation */

body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

Cheers! George

gwmatthews avatar May 19 '20 02:05 gwmatthews