-webkit-text-size-adjust: none doesn't seem to be working

Question

I have the same issue that is asked (and resolved) in this post. However, the solution(s) offered doesn't work for me. I tried both -webkit-text-size-adjust: none and <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to no avail.

It is a simple HTML page that is text-only

<!DOCTYPE html>

<html>
<head>
<link href="style.css" rel="stylesheet">     
<title>Pastrami fugiat pork tail ut</title>
</head>

<body bgcolor="#000000" link="#FFFFFF" vlink="#FFFF00">

    <h1>Pastrami fugiat pork tail ut</h1>
    <p>Pancetta bresaola ham, brisket short ribs tri-tip sed cillum turkey pork loin corned beef venison tail.</p>

</body>
</html>

The CSS

html
{
    -webkit-text-size-adjust: none;
}

@font-face{
    font-family:"Fertigo";
    src: url(Fertigo.otf) format("opentype");
}

body {
    padding:0;
    margin:1cm;
    font-family:"Fertigo", "Georgia";
    font-size:56px;
    line-height:1.5em;
    color:#FFFFFF;
    text-align:left;
    text-decoration:none;
    padding: 0px;
}

h1 {
    font-family:"Fertigo", "Helvetica";
    color:#FFFFFF;
    text-decoration:none;
    font-size:1.25em;
    font-weight:normal;
    margin:0px;
    padding:5px 0px 5px 5px;
    line-height: 1.5em;
}

h4 {
    font-family:"Courier New", "Georgia";
    font-size:1em;
    color:#FFFFFF;
    margin:0px;
    padding:0px;
    font-weight:normal;
    line-height: 1.5em;
}

Why do you have a stylesheet **and** `bgcolor="#000000" link="#FFFFFF" vlink="#FFFF00"` in your HTML? — BoltClock, Jun 19 '11 at 17:05
@robx @faraz None of the suggestions work. I think it has something to do witht he font-size attributes.. — RHPT, Jun 20 '11 at 04:28
Ever figure this out? I cannot get it working on iPhone either. — Justin, May 20 '15 at 22:08

robx · Answer 1 · 2011-06-19T16:53:11.037

4

Try putting your webkit in the body and to every element within body and test it with standard font first like:

body * {
    margin:1cm;
    font-family:"Georgia";
    font-size:56px;
    line-height:1.5em;
    color:#FFFFFF;
    text-align:left;
    text-decoration:none;
    padding: 0px;
    -webkit-text-size-adjust: none;
}

edited Jun 19 '11 at 16:53

answered Jun 19 '11 at 09:05

robx

2,993
2
23
27

Can the author of the original (@RHPT) not comment on this whether it worked or not? – basZero Jul 14 '15 at 13:17

Faraz Kelhini · Answer 2 · 2011-06-19T07:44:24.387

Try this:

body {
    padding:0;
    margin:1cm;
    font-family:"Fertigo", "Georgia";
    font-size:56px !important;
    line-height:1.5em;
    color:#FFFFFF;
    text-align:left;
    text-decoration:none;
    padding: 0px;
    -webkit-text-size-adjust: none !important;
}

h1 {
    font-family:"Fertigo", "Helvetica";
    color:#FFFFFF;
    text-decoration:none;
    font-size:1.25em !important;
    font-weight:normal;
    margin:0px;
    padding:5px 0px 5px 5px;
    line-height: 1.5em;
}

h4 {
    font-family:"Courier New", "Georgia";
    font-size:1em !important;
    color:#FFFFFF;
    margin:0px;
    padding:0px;
    font-weight:normal;
    line-height: 1.5em;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
 html {
    -webkit-text-size-adjust: none !important;
      }
 }

score 1 · Answer 3 · answered Nov 12 '19 at 16:47

1

body * { -webkit-text-size-adjust: none; }

seems to work whereas

* { -webkit-text-size-adjust: none; }

..doesn't, interesting.

answered Nov 12 '19 at 16:47

Stephen G

266
3
6

-webkit-text-size-adjust: none doesn't seem to be working

3 Answers3

Linked