I experience a strange behavior where text with the same formatting is being displayed with different sizes on the iPhone (Safari)
I have the following HTML:
<div class="page" id="thanks">
<div class="subtext">
<p>
text tex text <!-- Being displayed with the correct size -->
</p>
</div>
</div>
<div class="page" id="about">
<div id="about_us">
<div class="about_box" id="robi">
<p> text text text</p> <!-- NOT being displayed with the correct size -->
</div>
<div class="about_box" id="andrea"><p class="header">Robi über Andrea, 25</p>
<p> text text text </p> <!-- NOT being displayed with the correct size -->
</div>
</div>
</div>
And this is the according CSS:
body{
background-color:#ffffff;
font-family: 'GaramondPremrProDisp', 'EB Garamond', serif;
font-size: 17px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
@media handheld and (orientation: portrait){
body{
background-color:#ffffff;
font-family: 'GaramondPremrProDisp', 'EB Garamond', serif;
font-size: 30px;
margin-right: 0px;
margin-left: 0px;
margin-top: 0px;
}
}
div.page{
min-width: 100%;
position: relative;
z-index: 50;
}
div.page div.subtext{
width: 68%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
div.page div.subtext p{
text-align: center;
}
div#about div#about_us{
width: 68%;
height: 900px;
margin-left: auto;
margin-right: auto;
}
div#about div.about_box{
text-align: center;
height: 450px;
float: left;
clear: both;
}
As marked with comments in the HTML code... there is text which is affected by bigger font-size resulting from the media query and text which is not affected. The strange thing is, if I write all instead of handheld in the media query and test it on a desktop browser... ALL text is being affected by the rule so I guess it is not a selector problem.
I also tried everyting described in the answer of this question: Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others? (without any success).
edit: copied the described version to a folder in my dev environment which will not be affected by changes if you want to have a look at it live (veeeery slow): Check it out!
