Website elements and fonts are too small in mobile devices

I have just finished designing and coding my new project. But I need it to work well in mobiles. I resized my screen to something like 350~400px width and started coding and adding some media-queries to it. Looks great in redimensioned browsers. I have cut some elements and features and everything was fine... until I tested it with my smartphone

The screen isn't big. Less than 4' (probably 3.5). I put some alerts in the code and realised its width was 980px. Almost 3 times bigger than my tests on resized browsers.

Everything is just too small. Other things are great: media queries are working, the cuts I made in the code are OK too, but you can barely see the content in my mobile. This is certainly not I wanted.

I want it to look like an App and indeed it looks like an app on the redimensioned browser.

How do you create your responsive websites to deal with problems like this one?

I read something about using EM (and there is something new called REM) units but I am still very confused about it. Do I have to change ALL the px to em?

And also I know you can set the font-size in the html or body tags and all the other elements will inherit from them. Is that an approach? What do you usually do? Is there a trick or something? I'm not using bootstrap nor any other front-end framework.

Solution 1:

You can try adding the viewport <meta> tag :

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

• Using the viewport meta tag to control layout on mobile browsers

Solution 2:

Use media queries (Link) and percentages (%), 16px (default font size) = 100%. I hope it helps.