我制作了一个网站，其中所有文本在Android平板电脑和移动设备上与桌面设备相比会略微模糊。
想要复制一个小例子。
这是我的HTML代码：
<body>
<h3>MAKING OF</h3>
</body>
这是CSS代码：
body {
text-align: center;
padding-top: 50px;
}
html {
font-size: 62.5%;
}
@font-face {
font-family: MPL;
src: local("MPL"),
url(fonts/MPL.ttf),
url(fonts/MPL.eot);
}
h3 {
font-family: MPL;
font-size: 30px;
font-size: 3rem;
height: 60px;
line-height: 60px;
padding: 0px 12px;
background-color: #5496F2;
color: #000;
}
请问有人知道为什么在平板电脑上文本无法正确对齐的原因吗？
这是桌面浏览器中正确对齐的屏幕截图：
这是平板电脑浏览器中出现问题的屏幕截图：
在桌面上，FF和Chrome都可以正常工作，但是在安卓平板电脑上，无论是Chrome还是FF浏览器，都会出现错误对齐，并且在iOS Safari浏览器上也无法正常工作。这是链接：
http://inants.com/kadmos/web/kad/a/a
希望有人能帮助理解这个问题，并提供最佳解决方案。
谢谢。