Some Mobile Safari hints

06 Oct 2013

Safari on iDevices has a few annoying quirks (to me at least); one of these is its tendency to mark almost any sequence of numbers as a phone number. Fortunately there is a simple solution to this problem. Simply put the following meta tag in the head element of your HTML, and enjoy phone-number-less pages.

<meta name="format-detection" content="telephone=no">

And for my next trick, here’s how to keep Safari from inflating the size of your text when the device is rotated to landscape orientation: some simple CSS.

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

And lastly, here’s my favorite viewport meta tag, which I’ve found to work well in most situations, especially in combination with the above tweaks.

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

And for a nightcap, just remember that the golden ratio in percentages is 38%/62%. In other words, if you have two table columns and you want their widths to be a golden ratio, use those percentages of the total width.

Enjoy.