Html Keep Same Character Size In All Devices

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 ab

Solution 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"/>

Solution 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)

Solution 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.

Solution 4:

Try adding the below code

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