landscape mode of iPad and iphone 5c: text looks bigger than usual and line breaks are wrong

Question

When having a look at this site

this:

linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.

The font size seems bigger as well.

The word wrap / linebreak does not happen on my HTC One S in landscape mode.

Is there a tool that can help me figure out these irregularities?

Any idea what this problem is about?

Note: this gets used:

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

EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)

Answer 1

‑webkit‑text‑size‑adjust: 100%

Is the way to do it instead of

‑webkit‑text‑size‑adjust: none

Using none will break user zooming in various browsers.

Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/

Answer 2

Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.

The way to disable entirely the resizing is to use the following CSS rule:

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

However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming

What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.

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

Answer 3

To build responsive and cross-device websites you can use online tools such as this emulator

However, in text case formatting and layout, a real emulator is needed. X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets). By using this software, you will be able to understand/debug and correct your website.

Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.

In your case, first you need to stop all browsers to resize your text on rotation. Simply add the following CSS code.

CSS

html, p, a {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X. But any way, you need in the future to check your website on IOS simulator

Here is a screenshot from safari for an Iphone 5: