Skip to main content
Topic: Huge text and icons on iPhone5 in horizontal (Read 5909 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Huge text and icons on iPhone5 in horizontal

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.
sorry for my bad english

Re: Huge text and icons on iPhone5 in horizontal

Reply #1

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

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

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

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 #5

In doing some sauce testing, what I ended up doing is adding
Code: [Select]
/* 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.

Re: Huge text and icons on iPhone5 in horizontal

Reply #6

it is much better, I'll do the same on my forum and see what my users think ;) Thanks Spuds!
sorry for my bad english

Re: Huge text and icons on iPhone5 in horizontal

Reply #7

Should this be applied?
Bugs creator.
Features destroyer.
Template killer.

Re: Huge text and icons on iPhone5 in horizontal

Reply #8

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.
~ SimplePortal Support Team ~

Re: Huge text and icons on iPhone5 in horizontal

Reply #9

Because:
Quote from: Spuds – 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.
i.e. http://briantree.se/quick-tip-03-prevent-mobile-device-text-inflation-text-size-adjust-property/
Bugs creator.
Features destroyer.
Template killer.

Re: Huge text and icons on iPhone5 in horizontal

Reply #10

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? :)
~ SimplePortal Support Team ~

Re: Huge text and icons on iPhone5 in horizontal

Reply #11

Then you'd have to ask Safari why they started adjusting the size of text out of the blue, not here. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Huge text and icons on iPhone5 in horizontal

Reply #12

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?

Code: [Select]
<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.

Re: Huge text and icons on iPhone5 in horizontal

Reply #13

Quote from: emanuele – Then you'd have to ask Safari why they started adjusting the size of text out of the blue, not here. ;)
Because it's non-standard and it can be buggy, hence my suggestion :)
~ SimplePortal Support Team ~

Re: Huge text and icons on iPhone5 in horizontal

Reply #14

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.
Bugs creator.
Features destroyer.
Template killer.