iPhone: font-size gets bigger on orientation chg

Mobile
1

http://mayacove.com/mobile/test_font.html

I looked this up the other day, it seems this tag

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

should help to prevent font-size from getting bigger when you change orientation form portrait to landscape…

but for some reason this is helping ONLY for the font in the top-nav section(including links and selected, non-link nav elements), but not for main section of the page… on the main section of the page when you switch to landscape the font gets bigger, but not the font in the top nav… I want the font-size throughout not to change (can change when user chooses to zoom up, but I don’t want any font-sizes to change when orientation changes form portrait to landscape…)

how can I prevent font in main section from changing size when I change orientation?

(have not been able to test on Android (or Windows) phone, so I don’t know if this is an issue on phones other than iPhone…)

thank you…

PS: just realized that with tag I have user can’t zoom up, so: is there a tag that will prevent font-sizes to change on orientation chg, but that user can still zoom up if they choose to? (oh brother… mobile development; it’s not just a job, it’s an adventure… ;-))

2

Try this instead:

body {-webkit-text-size-adjust: none;}

Just putting this in the main style sheet can muck up text resizing on desktop browsers, though, so it’s better to put it in media queries like this:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {-webkit-text-size-adjust: none;}
}
3

that worked!!

thank you Ralph…

4

how do I enable user-zoom?

when search all I find is how DISABLE zoom… :wink:

tried

user-scalable=yes

and

user-scalable=1

in that <meta name=“viewport”…> tag… neither one of them worked…

thank you…

5

Not totally sure, but it’s more a case of not denying it rather than allowing it. Try removing this bit from the meta element you posted above:

maximum-scale=1.0;

I presume that’s what it preventing zooming.

So you end up with

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

That makes the site appear full width when visitors come to your site, but doesn’t prevent them from zooming in.

6

I don’t want to prevent the zoom, I want to ENABLE it… :wink:

but NOT on orientation change… only when the user zooms…

thank you…

7

Yes, I was just pointing out that you were disabling it, as it works by default normally.

8

hmmmm… thank you Ralph… so here’s another challenge:

need to make something appear dynamically, but ONLY for phones… (using jQuery)

when you make elements appear dynamically the style gets inserted inline, so you can’t overwrite it…

thank you…

9

Probably need a more concrete example to be sure of what you mean. But you can have a class on an element which is set to display: none in the desktop styles and display: block in the phone styles, for example.

10

well, needed to trigger event based on user input, but ONLY in phones (not tablets…) so either way, whether changing classes, show/hide, etc… needed to find a way to detect screen dimensions…

so just did

if (screen_width < 480) {

:slight_smile:

(question: 480 is the width of iPhone screen (when in landscape), right? but don’t some Android phones have larger screens? what is screen width of LARGEST smartphone??)

thank you…

11

The iPhone is actually much wider than 480px, but it obeys the 480px wide rule, and I think Android phones do too.

so just did

if (screen_width < 480) {

I’ve never seen code like that—not in CSS anyway. Is this PHP, JS or …?

12

it’s JavaScript… jQuery, to be precise…

I trigger an event (show an element) only if user is on a phone…

so the phones “obey” a 480 rule, even though those are not their real dimensions?? well that’s interesting… :wink:

so I’m safe for all phones with that rule? ok…

once again thank you very much, Ralph… you have been very very helpful…

edit: PS: actually I did…

if (screen_width <= 480) {

(if 480 or less than, instead of just less than…) that should be a bit safer, no? :wink:

13

Certainly iPhone does. I can’t say for sure with others, but I think so. The iPhone display has gradually packed in more pixels (with the retina display etc.) and it would be an awful pain if you had to target each iPhone version differently, so thankfully they’ve spared us that misery. :slight_smile:

once again thank you very much, Ralph… you have been very very helpful…

Glad to be of help. I admit I’m a bit of a blind leader, but better than nothing, hopefully. :slight_smile:

(if 480 or less than, instead of just less than…) that should be a bit safer, no? :wink:

Sounds good to me. :slight_smile: