Android瀏覽器（SDK模擬器）不成比例的字體大小

我無法理解Android瀏覽器的縮放文字行爲。這裏是我的HTML代碼：Android瀏覽器（SDK模擬器）不成比例的字體大小

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=600"> 
<title>TestBug</title> 
<style type="text/css"> 
    html, body { 
     font-size:16px; 
     font-family: Arial, sans-serif; 
    } 
    p { 
     width:600px; 
     margin:0 auto; 
     height:200px; 
     background-color:#bbeabb; 
     font-size:16px; 
    } 
</style> 
</head> 
<body> 
    <p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip 
    ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur 
    sint occaecat cupidatat non proident, sunt in culpa qui officia 
    deserunt mollit anim id est laborum. 
    </p> 
</body> 
</html>

問題是這裏是一個固定高度的p元素。此外，這個p中的文本的字體大小定義爲16像素。還有就是它的外觀在桌面的圖像：

the paragraph with fixed 200px height, as it appears in desktop browser

當我看到在Android瀏覽器在同一頁我希望看到確切一樣在桌面瀏覽器（段與綠色背景和文本內它不會溢出），即預期的行爲是Android瀏覽器必須保持比例，所以內部文本佔據段落高度的大約一半。而是接下來發生的事情：

the paragraph with fixed 200px height, as it appears in android browser

正如你看到的，雖然段落的高度和寬度根據視區元標記與寬度爲600像素的使用被縮減，但文字的高度並沒有相應的縮放。

雖然我用'em'-units一切都很好。

有人能解釋一下這裏發生了什麼嗎？

來源

2012-04-22 user907860

IIRC移動瀏覽器使文本比正常情況下大，以便縮小頁面時可以更輕鬆地閱讀文本，這可能會讓您的設計變得糟糕。 – Andrea 2012-04-22 21:53:36

如果這是正確的，那麼會出現另一個問題：移動瀏覽器爲什麼不放大網頁的其他部分？以及爲什麼他們只放大以像素爲單位設置大小的文本，因爲當我將單位更改爲'em'時，所有縮放都正確，文本在移動瀏覽器上略顯清晰，但保留了比例。或者可能只存在於android模擬器中的問題？ – user907860 2012-04-23 13:16:23

Caligula，老實說我不知道。我只知道他們有時候會混淆文本縮放。雖然這可能不是真正的問題。 – Andrea 2012-04-23 21:04:46

'文字大小'設置在瀏覽器首選項中設置爲'大'。這就是爲什麼最好在頁面測量中始終使用ems的原因

來源

2012-04-24 16:01:50 user907860

Android瀏覽器（SDK模擬器）不成比例的字體大小

回答

相關問題