androidcssandroid-4.1-jelly-bean

A rem is not a rem?

I've got strange result on an Android device while trying to use rem unit for adaptive HTML page. When opening this fiddle on any device, I expect to see "640" in the alert message. It works well on all my devices except of a tablet pc where it shows 832. Why?

html:

<div id="div"></div>

css:

html {
  font-size: 640px;
}
#div {
  width: 1rem;
}

js:

$(window).load(alert($('#div').width()))

Device info:

Solution

  • The problem was caused by the "Text scaling" browser feature. It was set to 130%.

    Text scaling in Android browser