移動設備上的字體大小非常小

我在我的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

移動設備上的字體大小非常小

回答

相關問題