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;
}
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;
}
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;
}
}
body * { -webkit-text-size-adjust: none; }
seems to work whereas
* { -webkit-text-size-adjust: none; }
..doesn't, interesting.
精彩评论