All geek questions in one place

Android Chrome ignores the -webkit-text-size-adjust: none property. When scaling, the text is scaled

Our client requested a website, but did not want to pay for the mobile version. We are still working on mobile devices. When zoomed in, Chrome on Android (4.0) scales a bunch of text. We tried to set the -webkit-text-size-adjust-none: none property, but it seems to be ignored and the text is still expanding.

Works great on iOS.

Any suggestions?

+6
source share
5 answers

Note that the specified -webkit-text-size-adjust property is -webkit-text-size-adjust standard. Read more about it here .

Chrome for Android is currently scaling text using font enhancement , and there’s no way to disable it.

If you want to disable font formatting, provide your use case and report the problem through new.mcrbug.com .

+6
source

Just found a workaround for this. Set the maximum height in the parent text element much more than ever appeared. For instance,

 <p class="intro"> This is some text that is appearing blown up and ridiculous on Chrome Mobile. </p> p.intro { max-height: 5000em; }

You can set the maximum height for any parent element. He should not be the first parent. For instance,

 <footer class="primary"> <p class="intro"> This is some text that is appearing blown up and ridiculous on Chrome Mobile. </p> </footer> footer.primary { max-height: 5000em; }
+29
source

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> you can disable scaling

+6
source

-webkit-text-size-adjust:none so horrible!

I have a bad site for the eyes, and I constantly get my pages with a 200% increase by default. With -webkit-text-size-adjust:none I can’t read anything, and my only alternative is to use Firefox. This is my number one problem these days when browsing.

Too many sites use this, especially Facebook's embedded comments on web pages. You should stop using it and create an interface that will work with a font of any size.

+3
source

I had the same issue with Firefox on Android.

The solution for me was to add the style "float: left;" to a div containing the text of the problem.

You may need to set the width of the div in the same way as the parent (in pixels or 100%) to make sure that it does not affect the rest of the sections.

See How to prevent browser resizing for a mobile browser.

+3
source

Source: https://habr.com/ru/post/921524/

More articles:


All Articles