Streaming live at 10am (PST)

Font size on landscape


#1

When in landscape the font size seems a lot bigger. Is there a way to prevent thus behavior? I only tested this with iPhone 5s


#2

It's because iPhone 5/5C/5S landscape stands as 568px instead of 1136. Had same issue.


#3

@jorn Can you send us a link to your test so we can compare the webflow version vs. the device? That might help us understand the issue a bit more.

Thanks!
-Dan


#4

Sure. Look at my portfolio for example.
When I was looking for a slider bit more advanced than the awesome built in one I found this site, the text looked really nice both on landscape and portrait. Royalslider
I'm using a 5s. Tested on my old 4s and it does not behave this way.


#5

I'm trying this on my exported site with no luck.

html {
-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}


#6

Ok I did a minimal test site here: test site that works.
It has this in the css:
body {-webkit-text-size-adjust:100%;}
and this meta:
meta name="viewport" content="width=device-width, initial-scale=1"

I also find this article: Controlling text size in Safari for iOS without disabling user zoom


#7

@jorn, thanks for the research. We're still looking into this. It's odd because we already have this:

<meta name="viewport" content="width=device-width, initial-scale=1">

And this (via normalize.css which is loaded before your site CSS):

html {-webkit-text-size-adjust:100%; }

Investigating whether it has to go in the body selector instead (or both?).

Also, I just tested on an iPad3 and iPhone5 and seems like I'm getting constant font sizes. Here's a screenshot overlaid from my phone:

Could it be that you happened to publish a few days ago when we didn't have initial-scale=1 in the head tag?


#8

Its was not there when I downloaded the site =) I changed it though. And I think the CSS went into body after testing and googling. I'll try downloading it again and let you know but it seems it should be working now. Thanks for the quick response. If I have waited a few days I probably haven't noticed it then smiley


#9