gnab/remark

Small screen font size inflation

gwmatthews opened this issue · 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