Revamp project: Font sizes in mobile Safari
Today I found this odd little bugger in mobile Safari. I was writing the mobile-specific CSS sheet for the website I’m revamping, and it was all going smooth until I stumbled upon this annoying little <p> tag. The problem? I had specified the font size and properties for this little paragraph tag earlier in my document, which looked like this:
#my-short-paragraph {
font: bold italic 16px Georgia, serif;
text-align: left;
color: #3a8ede;
cursor: pointer;
margin: 25px 0 30px 10px;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
Nothing tricky going on here, right? A bold, italic Georgia font at 16px, with a blue color. Simple as that. But when I wrote the following CSS to make the layout for mobile browsers, I noticed that the font size did not change at all in mobile Safari. Not in iOS 4.0.2, not in iOS 4.1, nor in iOS 4.2.
@media screen and (max-device-width: 480px) {
#my-short-paragraph {
font: bold italic 10px Georgia, serif !important;
}
}
I’m getting very used to adding !important rules while writing for mobile, since you kind of have to override the ”normal” style rules, but this didn’t matter. I tried lots of different variations, like font-size: 10px !important;, font: 10px Georgia, serif !important; and font-size: small;, but neither worked. It didn’t even work when I tried it this way:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#my-short-paragraph {
font: bold italic 10px Georgia, serif !important;
font-size: 10px !important;
}
}
At last, I was starting to get a bit frustrated, and cursed this paragraph’s font size sorcery. Then I thought, ”Let’s try declaring it with two different methods, then maybe Safari will take the hint and make the font smaller!”, and this is what I finally came up with:
@media screen and (max-device-width: 480px) {
#my-short-paragraph {
font: bold italic 10px Georgia, serif;
font-size: small;
}
}
It worked! It baffled me, but it worked! I didn’t need the !important rule any longer, but I had to declare the font size twice with two different methods – one time with px and one time with small. If I removed either declaration it wouldn’t work, regardless of any !important rules.
This problem might be very specific, but it was weird enough for me wanting to post it. I don’t know why this problem occurred, but here’s the solution either way.
