3

I'm using px font size, which may have something to do with it.

However, portrait my font size is a good reading size:

Portrait website design

But landscape the font size is just too large. This is an iPhone 6+ screen

landscape design

Is the best way to resolve this, a media query for portrait and landscape mode?

cmp
  • 295
  • 2
  • 16
  • The font size is not changing, the viewport zoom is. This is why the same font size looks smaller. Try zooming in and out on a web page, or a picture, you will see that the text will look bigger or smaller. Try playing with the viewport meta tag. – Charleshaa Nov 30 '16 at 15:40
  • 1
    This should be the solution http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca – Millard Nov 30 '16 at 15:45

2 Answers2

10

Set the text-size-adjust property in your CSS file like this:

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

More info at https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust.

Johann Kratzik
  • 672
  • 5
  • 9
  • I think that this is a better answer than the "already has an answer", as it covers the "moz" and "ms" vendor-prefixed properties. Even though the question states "iPhone" (and therefore implies the "Safari" browser and webkit), adding these prefixes adds a level of safety not addressed the other answer. – Parapluie May 03 '18 at 10:14
0

As tom says the font size is not changing, your viewport is. This can be changed using the viewport meta tag but this will change the whole page. If you just want specific text items to be changed, a media query is much better.

I have added the landscape iphone and portrait iphone sizes below for you reference, and used a h1 title as an example style.

    /*iphone landscape*/
    @media all and (min-width:321px) and (max-width:480px) { 
        h1 {
            font-size:18px;
        }
    }

    /*iphone portrait and below*/
    @media all and (max-width:320px)  {
        h1 {
            font-size:16px;
        }
    }
mariuspearson
  • 219
  • 2
  • 1