CODEWITHSUNDEEP
csssassfont-size
Hamed Minaee
Hamed Minaee

Reputation: 2560

rem does not respect users setting on smart phones

I am trying to use rem to respect users setting for font-size:

I added the following first in my css file:

html { font-size: 62.5%; }

Then I added font-size as rem to my element. such as :

.header{
font-size: 1.5 rem;
}

In desktop and even in simulator it works fine means when I change the font size setting in browser I can see that my page font size changes to reflect the browser settings however in phones such as iphones when I try

1) Go to Settings > General > Accessibility > Larger Text. 2) Tap Larger Accessibility Sizes for bigger font options. 3) Drag the slider to select the font size you want.

I do not see any changes at all. Is there any trick I need to use or is it possible at all?

Upvotes: 0

Views: 854

Answers (1)

Jakob E
Jakob E

Reputation: 4926

You can make it work using rem and -apple-system-body 

@import url("https://fonts.googleapis.com/css?family=Raleway");
html { 
    /* Must go on the HTML tag to work with rem */
    font: -apple-system-body;
}
p {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2rem;
}


<p>This is some text in my page.</p>

More info: http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type

Upvotes: 1

Related Questions