Questions › Different font sizes on pc and mobile in bootstrap

I have created a very simple page here: http://rasadata.gigfa.com/bootstrap/Home.html

When I open it in my pc browser everything is normal but when I open it in my LG G3 phone text size is very small that is impossible to read.

Why? I want to have a sensible text size on both devices.

What is wrong?

Here is the simple html:

<div class="container">

 <div class="row">

  <div class="col-md-4">
  <p>A simple text</p>
  </div>

  <div class="col-md-4">
  <p>A simple text</p>
  </div>

  <div class="col-md-4">
  <p>A simple text</p>
  </div>

 </div>

</div>

Text size on pc is normal but in mobile is very very small. How can I have the same text size on both devices?

Comments :
Quiver replied

Do you have any custom CSS on the site that could be causing this issue?

I have but it is empty.


2 Answers :
Faisal Ashfaq answered

You're missing this mobile-first meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">
Faisal Ashfaq replied
I have seen the live site and it was missing, when I added it using browser editor, it worked.;
Faisal Ashfaq replied
Put this is tag inside <head>.;
Ali.Rashidi replied
Oh. You're right. Thank you so much :);
Faisal Ashfaq replied
You're welcome. Happy coding!;
Herman Nz answered

If you inspect the html of your work, you'll see that in bootstrap css, font set into 10px (font-size:10px;) even though your body font size is 14px;

Change it into 14px as well as your body font size. Otherwise, create new custom stylesheet to write it.

Take a look at screenshot of your page;

ss

font size in your mobile: ss2

Ali.Rashidi replied
The problem was because I had forgotten to add the meta tag. Thanks for your answer.;
Herman Nz replied
I was also not accurate seeing your script :D. that viewport is a must in bootstrap;
Ali.Rashidi replied
Sometimes you forget the simplest things and they cause even greater mess ups :D;
Herman Nz replied
you got the point there. lol;