Huge text and icons on iPhone5 in horizontal
March 15, 2015, 08:29:54 am
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.
Re: Huge text and icons on iPhone5 in horizontal
Reply #1 – March 15, 2015, 10:44:07 am
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.
Re: Huge text and icons on iPhone5 in horizontal
Reply #2 – March 15, 2015, 11:29:43 am
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)
Re: Huge text and icons on iPhone5 in horizontal
Reply #3 – March 15, 2015, 11:34:36 am
this is a capture in horizontal view with my nexus 5, it is much different than those from iphone
Re: Huge text and icons on iPhone5 in horizontal
Reply #4 – March 15, 2015, 01:33:49 pm
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)
Re: Huge text and icons on iPhone5 in horizontal
Reply #8 – April 25, 2016, 09:16:41 am
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.
Re: Huge text and icons on iPhone5 in horizontal
Reply #14 – April 25, 2016, 05:14:46 pm
emanuele
Global Moderator
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.