Font size extremely small on mobile devices

问题

I have a <p> block in a huge <div> in the main body of my html with 80% in font-size, and also I have a footer <div> in the lower part of my body.

The text in the footer has also 80% font-size, and if I test it on my PC it is equal, but if I test it in a mobile device, the text of the footer is extremely small, impossible to be read.

How is this possible? Which is the explanation and how can this be avoided?

My main text:

<div id="mainTextContainer" class="text">
<p>test text</p>
</div>

my footer:

<div id="cookiesBar">
        <div>
            Esta web utiliza 'cookies' para su navegación. Al utilizar nuestros servicios
            aceptas su uso.        
        </div>
    </div>

My CSS:

#cookiesBar {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    text-align: center;
    height: auto;
    background-color: rgba(136, 188, 182, 0.7);
    z-index: 99999;
    border-radius: 0px;
    text-decoration: none;
    line-height: 30px;
    font-size: 80%;
    font-family: verdana;
}

#mainTextContainer {
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 60px;
}
.text {
    font-size: 80%;
}

回答1:

Have you added the viewport meta tag to your document?

If not, add this to your head section:

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

A mobile browser will naturally attempt to zoom out to display your entire web page like a desktop browser. The viewport meta tag scales your page to the device width.

More information:

A tale of two viewports ~ QuirksMode.org
Using the viewport meta tag to control layout on mobile browsers ~ MDN

回答2:

Depending on the version of IOS you're using it may actually be an issue, with that version of the browser.

Just declare the base font size:

body {
 ~mybase font size
}

来源：https://stackoverflow.com/questions/35563900/font-size-extremely-small-on-mobile-devices

标签

html

css

font-size