html keep same character size in all devices

Question

I make an exercise about html with several input buttons:
http://bullmalay.appspot.com/
I visit it on my mobile. But I find the text size is really small. I think the reason is about resolution.
Can anyone help me about the text size? I want it can display the similar size in my laptop.

ps.
I have searched about css:@media (min-width: 702px) and then set the font size. But I think even a small device can have a resolution high than my laptop.The size will be smaller than it display on my laptop screen.
I think the size should be: fontSize * (width per pixel of my laptop)/(width per pixel of that device). But I am not familiar about css.

Answer 1

Thank you all. I have learned a lot. But I find the reason myself.
The browser on mobile device will auto scale the page to adapt the mobile screen. I just add this line to the html and it works:

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

Answer 2

You may use something like @media handheld and (max-width: 500px). But unfortunately, I don't think there's a way to use CSS like

fontSize * (width per pixel of my laptop)/(width per pixel of that device)

Answer 3

There is only one way so far that we know, you need to do some thing like this

@media (max-width: 300px) {
    html { font-size: 70%; }
}

@media (min-width: 500px) {
    html { font-size: 80%; }
}

@media (min-width: 700px) {
    html { font-size: 120%; }
}

@media (min-width: 1200px) {
    html { font-size: 200%; }
}

Well ther is one thing you can do, You probably want to set your font sizes in pt units (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.

Answer 4

Try adding the below code

body{
    -webkit-text-size-adjust: none;
}