2

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)

Icarus
  • 1,627
  • 7
  • 18
  • 32
Toskan
  • 13,911
  • 14
  • 95
  • 185

3 Answers3

4

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%;
}
MacK
  • 2,132
  • 21
  • 29
  • if you change `none` to `100%` i will accept your answer. None does not work – Toskan May 20 '14 at 21:39
  • Are you testing on a real iPad or an emulator? @MacK's answer has always worked for me, and sometimes emulators are not entirely accurate... – willanderson May 20 '14 at 21:48
  • I had it tested by a friend on a ipad and on an iphone 5c i think. What version of ipad are you guys using? I didnt use an emulator – Toskan May 21 '14 at 10:25
  • I still reward this guy with the bounty, since he was the first to answer leading me into the right direction – Toskan May 21 '14 at 10:29
  • Sorry, I usually use `none` which always makes the job done for me since I tend always to disable the user zoom on pages with `user-scalable=no`. My most sincere apologies, I will edit the answer to be more complete. – MacK May 21 '14 at 16:03
3
‑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/

jasuy
  • 46
  • 3
1

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:

enter image description here

Romain
  • 1,903
  • 2
  • 18
  • 23
  • thanks a lot, actually mack gave the hint first with webkit-text.... just to point out. `none` didn't work but `100%` worked – Toskan May 20 '14 at 21:37
  • the emulator shows wrong display of the iphone 5 device in landscape. Does it really display like this? i.e. not filling the display in landscape? – Toskan May 20 '14 at 21:41
  • btw the IOS simulator runs only on a mac, do I understand that correctly? I am running *cough* windows *coughcough* – Toskan May 20 '14 at 21:43
  • none didn't work but 100% worked. This depend on your viewport,the device and the browser used. So, on which device are you testing your website? By the way, IOS sun only on mac, however there are some online platform to simulate devices (not free) – Romain May 21 '14 at 09:32
  • ipad and iphone 5c. So obviously safari. This text zoom behaviour is, as far as I can tell, only a problem for apples devices. I haven't heard about similar problems from similar other devices of other vendors. – Toskan May 21 '14 at 10:26