Safari shows bigger font-size in landscape mode - css

Question

In my current responsive project I have the issue that when using my iPhone in landscape mode, the font-size is a lot bigger and introducing -webkit-text-size-adjust: none; didn't help (see JSFiddle below).
I use these definitions in my project:
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
and the breakpoints
#media only screen and (max-width: 35em) and (orientation:portrait) {
...
}
#media only screen and (max-width: 47em) and (orientation:landscape) {
body {
-webkit-text-size-adjust: none;
}
}
#media only screen and (max-width: 35em) and (orientation:portrait),
only screen and (max-width: 47em) and (orientation:landscape) {
...
}
You can directly test it at the result page of my JSFiddle.
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
and
#viewport {
width: device-width;
}
#media only screen and (max-width: 47em) and (orientation:landscape) {
body {
-webkit-text-size-adjust: none;
}
}
.test {
width:100%;
margin-bottom:2px;
height:2em;
font-size:3em;
}
.test:nth-child(2n+1) {
background-color:#eeeeee;
}
What can be wrong?
UPDATE:
Even without breakpoints it doesn't work, see JSFiddle
UPDATE 2015-07-15
I found a workaround: Disable the zoom for mobile phones would solve the problem. However, as tablets get the desktop version, zoom must be enabled for tablets. I achieved a working solution now by checking the screen size in javascript and if it is below 752px I modify the viewport definition to width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0