2017-06-03 60 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

相关问题