What does -webkit-text-size-adjust do?
Solution 1
-webkit-text-size-adjust
It specifies that if you(author) want's to resize the text when the browser page is zoomed. Most of the times it is better to set it to auto
or 100%
as the web browser will take care of how resizing of text is to be done.
Note : Mozilla devlopers page says its a non-standard
This article will help you more.
Interesting note : Developers using Twitter Bootstrap may be interested to know that Bootstrap uses ‑webkit‑text‑size‑adjust: 100%
out of the box : Source Link
Edit
Chrome on android phones uses font boosting, so -webkit-text-size-adjust
is being ignored no matter what value you set. You can disable font boosting it by setting max-height
to something large(100000px
or so) see this bug.
Solution 2
The -webkit-text-size-adjust
is an experimental technology specifies a size adjustment for displaying text content in Safari on iPhone. It takes 3 type of value:
none: The text size is not adjusted.
auto(default): The text size is automatically adjusted for Safari on iPhone.
The size in percentage at which to display text in Safari on iPhone.
Only some mobile browsers do support this CSS property beside iOS. You can check the compatibility here
Solution 3
There does not seem to be any published specification of -webkit-text-size-adjust
, but there is e.g. an informal description, which says that it works in Safari on iPhone.
According to CSS Mobile Text Size Adjustment Module Level (Editor’s Draft), auto
is the initial value, so -webkit-text-size-adjust:none
would have an effect only when it overrides a setting that sets the property to a different value. Presumably -webkit-text-size-adjust
works mostly the same way as the planned text-size-adjust
property.
Related videos on Youtube
user1437328
Updated on January 27, 2021Comments
-
user1437328 over 3 years
I am trying to understand the use of
-webkit-text-size-adjust:none;
.Adding/Removing that doesn't affect my font sizes on android (chrome) or iOS (safari and chrome). So what's the use?
-
MarcinJuraszek about 11 yearsRemoving does not change anything, because
none
is default value. -
user1437328 about 11 yearsI thought
auto
was default. -
Timothy Khouri over 9 yearsThis question isn't about opinion, or emotional value - but rather a clear and straight forward "I tried xyz and it didn't seem to have an affect, so help me community to understand xyz." - should be re-opened.
-
-
user1437328 about 11 yearsjust read the bootstrap note. but honestly, I think my question is still unanswered I think. Now i learnt that using
none
is bad for desktop browsers, but how is it exactly affecting mobile browsers ? I just don't see any changes on setting the property tonone
. -
Amandeep Jiddewar about 11 yearswhat is the browser you are using?
-
user1437328 about 11 yearssafari+chrome on iOS 6 (ipad) and chrome on android 4.2 (nexus)