em vs px… for mobile browsers

Question

For desktop browser all modern browser uses Zoom functionality so we can use PX but if same site can be seen on mobile then would px not be good for zooming in mobile browsers.

Answer 1

You can use this trick for converting fonts from px to em in your CSS:

body {
  font-size: 62.5%; /* resets the page font size */
}

Then specify your font sizes like this:

p {
  font-size: 0.8em; /* equals 8px */
  font-size: 1.0em; /* equals 10px */
  font-size: 1.6em; /* equals 16px */
  font-size: 2.0em; /* equals 20px */
}

And so on. Then you can convert px to em for your layout at PXtoEm.com.

Answer 2

Pixels are fixed, one pixel will use the same place both on a mobile or on any display. Ems are relative, they are so called because they use the approximate size of the uppercase letter 'M'.

So, yes, you should use ems, since they will be adjusted depending on the screen, and your fonts are likely to fit better with them.

Answer 3

I recommend not to use pixel precision designs generally and particularly when developing for mobile devices. The reasons are simple:

• You're dealing with devices with screens ranging from tiny resolutions to > 1920x1080 and there is no 'one size fits all' approach; also consider that your users might not know that a zoom function even exists in their browsers.
• When developing for mobile devices be aware that not many of them support a wide variety of font sizes, so you cannot rely on pixel precise fonts. Line-height is not supported at all by some mobile browsers. Thus if your design relies on pixel precision for, say a menu bar, and you design the bar to be x pixels high, the result may look completely wrong.

Dan Cederholm's book "Bulletproof Web Design" may not be quite as bulletproof as the title suggests, but it's a really good start for answering your question/ solving your problem.

Answer 4

px won't be a real actual pixel when the screen is zoomed out on a modern mobile browser. These browsers are effectively emulating a desktop browser with desktop browser-size pixels.

So for this type of browser using px is no worse than it is for a normal desktop browser. You can do it if you want without major problems, but in both situations em is preferable for the main body content, if you can.

Answer 5

PX is a fixed pixel size EM is relative to font size

So really, yes you should probably use EM for a lot more of web sites. It will let a user define how large they want there font and your site can scale around it.

However, most web-devs like the more specific PX as they can know exactly how things are displayed relative to each other.

But seeming as desktops and mobiles have such drastically differing resolutions, its probably just going to be easier to redesign your site for mobile browsing.