Search code examples
htmlcssdimensions

Keeping dimensional consistency on mobile devices

I am working on a very simplistic website right now to keep consistency between screens fairly precise.

My problem though, is that for some reason on phone browsers the content on the website appears to be zoomed out and much smaller than it is supposed to be.

I'm using ems for measuring and trying to use this unit as a way to keep the dimensions consistent between screens, but I think I'm using them incorrectly or I need to figure out a different way.

Here's my jsfiddle for a basic example: http://jsfiddle.net/szzmc71f/

P.S: I'm trying to achieve this consistency based on scale.

Solution

  • Add a viewport to the document in order to achieve this consistency:

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