Some users reported to have huge text and buttons on iPhone 5 in horizontal position.
my wife has an iphone 5 and I did a test on elkarte.net, in vertical position is working fine, but huge text in horizontal view. I attach a screenshot with safari browser.
Is it just the forum title ?
We really don't specify to many font sizes in the mobile css, just a few, and instead leave that to the mobile device. We just set our font stack and sizes etc for the body.
When a mobile device comes along, the viewport tag is used and the device is supposed to determine how to scale up/down the fonts based on its capabilities. So generally the smaller the screen, or the higher its pixel resolution, the more the device will choose to pump up the font size so you can read it.
We can target some of the large fonts that may be getting over scaled, but can't simply change them all since its specific to every device.
I attach other images, maybe it's more clear now. It's impossible to browse the forum on horizontal view, no problem in vertical (last image attached)
this is a capture in horizontal view with my nexus 5, it is much different than those from iphone
The text-inflating algorithm is applied by the device, not sure why the phone in that orientation has decided it needs to inflate the font that much, seems like a bug in the Safari device css to me.
So ... thoughts.
One is to increase our media query that currently kicks in at 540px to 568px which would catch the iphone 5 ... right now its going to use the 800px section which may be to much info for that screen size and that may somehow be fooling the inflating algorithm.
Two is we could try to add the css -webkit-text-size-adjust: 100%; for that query as well, that is supposed to tell the device not to inflate the font, not sure how small that may make it. Also 1/2 the apple documentation says that will not work if you have defined a viewport in the meta tag, the other half says it fine. Thanks apple.
The iphone 6+ has a screen size of 736, the iphone6 667 ... so those will still get the 800 wide site which is probably fine as well since those things are the size of a paperback book.
So I'm first going to tweak the sites 540 MQ up to 568 to see if that has an effect on the font, someone will have to let me know since I don't have any iStuff to test with and the emulators show its currently fine. (done and ready for testing)
In doing some sauce testing, what I ended up doing is adding
/* This one does 568 (iphone5 landscape) */
/* Used to prevent font scaling in landscape while allowing user zoom */
@media screen and (max-width: 35.50em) {
html {
-webkit-text-size-adjust: 70%;
}
}
to index.css on this site. This should target iphone5 when in landscape mode and adjust the font size a bit ... 70% was a guess, hard to tell if thats to small or to big from just the VM. Let me know how that works for you.
it is much better, I'll do the same on my forum and see what my users think ;) Thanks Spuds!
Should this be applied?
I am not sure I get why not specifying some em dimensions, they should be related to parent dimensions, so it would kill all of these, in theory.
Because:
i.e. http://briantree.se/quick-tip-03-prevent-mobile-device-text-inflation-text-size-adjust-property/
Indeed, why relying on non-yet-standard and not fully supported things when you can just scale stuff down with em values that will work cross-browsers with 0 compatibility issues? :)
Then you'd have to ask Safari why they started adjusting the size of text out of the blue, not here. ;)
Hopefully not. :P
I don't have an iPhone, but going by ppk over at http://www.quirksmode.org/mobile/metaviewport/ shouldn't something like this work?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Currently it only says width=device-width. Anyway, I'll leave it to iPhone victims to test.
Because it's non-standard and it can be buggy, hence my suggestion :)
Since when Safari is non-standard?
I feel you are thinking ElkArte is using "-webkit-text-size-adjust", but that is the proposed workaround to the fact Safari is auto-resizing by its own decision the icons.
Doesn't mean it actually works, think that Firefox doesn't even fully work with border-radius ones after like 7 years old bug report or something...
/me fails to understand the point Flavio is trying to do...
Spuds is proposing it because the problem is webkit specific and the tag addresses only webkit.
Who cares about firefox bugs when we are talking about Safari? We have years old bugs as well, it's normal in any project.
Did we ever manage to fix that one?
As far as I remember this was solved, no other complains received on my forum, if needed I'll make other tests
Since this is a slightly older topic it may also simply have been fixed in Safari/WebKit ;)
I just checked, seems fine on elkarte.net and also on my forum based on 1.0.10
Cool!
Fixed then! :D