2017-06-03 100 views
0

這是我在桌面視圖和移動視圖中測試字體大小的代碼。我使用Chrome Inspector在桌面視圖和iphone5視圖之間切換。Chrome瀏覽器iPhone5視圖中的字體大小更改

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>html5 font test</title> 
    <link rel="stylesheet" href=""> 
    <style type="text/css"> 
    body, html { 
     font-size: 18px; 
    } 
    p { 
     font-size: 1em; 
    } 
    </style> 
</head> 
<body> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a arcu sed massa finibus dapibus ac sed erat. Phasellus eget magna lectus. Curabitur lectus augue, porta ac faucibus a, efficitur et mi. Phasellus id purus maximus sem placerat varius et luctus eros. Donec maximus odio at erat facilisis, id lacinia erat imperdiet. Cras lacinia orci sed nisl gravida vestibulum. Aliquam dignissim nisl ut auctor rhoncus. Nam congue, diam quis ultrices iaculis, mi purus mollis libero, sit amet egestas nulla justo vel dui. Ut pharetra bibendum lorem, eget rutrum mi scelerisque id. Nullam feugiat condimentum cursus. In at fringilla augue.</p> 

</body> 
</html> 

問題是p標籤字體大小在桌面18像素,但改變成iphone5的視圖51px。當我調整瀏覽器窗口的寬度時,font-size保持爲18px,但切換到iPhone5視圖時,字體大小更改爲51px。

下面是Chrome的iPhone5的移動計算視圖字體大小

enter image description here

下面是桌面計算字體大小

enter image description here

但這是怎麼發生的?

如果您訪問www.wordpress.com,則在Chrome設備模擬器中查看時,它們的計算字體大小僅從20px變爲16px。爲什麼?

回答

1

試着把它放在你的頭部<meta name="viewport" content="width=device-width">。它基本上迫使移動瀏覽器以它自己的屏幕尺寸來渲染頁面。 Here是一篇文章,更詳細地解釋了它的作用。

+0

非常感謝!它的工作原理是,iPhone5視圖中的font-size保持爲18px,但爲什麼在自己的設備寬度320px處進行渲染會使計算後的字體大小不變? –

+0

我認爲這是因爲默認情況下,移動設備會嘗試通過調整字體大小來彌補不適合移動設備的網站,例如通過調整字體大小以使文本更清晰易讀。 – WizardCoder

相關問題