移动设备上的字体大小非常小

我在我的html主体中有一个<p>块，其中有012％的存在，其中80％在font-size，我的身体下部还有一个页脚<div>。移动设备上的字体大小非常小

页脚中的文字也有80％font-size，如果我在我的PC上测试它是相等的，但是如果我在移动设备中测试它，页脚文本非常小，不可读。

这怎么可能？解释是什么？如何避免这种情况？

我正文：

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

我的页脚：

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

我的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%; 
}

来源

2016-02-22 NullPointerException

你有没有加入视meta标签到您的文档？

如果不是，将它添加到你的头一节：

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

的移动浏览器将自然地试图缩小到像桌面浏览器中显示整个网页。视口元标记将您的页面缩放到设备宽度。

的更多信息：

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

来源

2016-02-22 21:20:31

实际上它扩展到物理宽度不“虚拟”。在iphone 6s plus上的Retina显示屏是全高清的，但像素的屏幕物理尺寸约为400. – Covik

@Covik，我在我的答案中写了“设备宽度”。这不是物理宽度吗？ –

是的，你是对的。我刚才说得很清楚，并给出了一个例子，以便他能更好地理解它。干杯! – Covik

根据IOS版本你使用它实际上可能是一个问题，该版本的浏览器。

只是声明基本字体大小：

body { 
~mybase font size 
}

来源

2016-02-22 21:22:46 Sean

它没有IOS，它是nexus 5在桌面版本chrome中使用F12进行测试 – NullPointerException

请使用与文档其余部分相同的标记。所有文本应该在段落中。......

Esta web utiliza 'cookies' para su navegación. Al utilizar nuestros servicios aceptas su uso.

– Sean

移动设备上的字体大小非常小

回答

相关问题