移动端最小字体限制测试

一、通过下面的代码在不同的浏览器里打开进行测试：
<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <style>
          body{font-family: "黑体-简","微软雅黑";}
     </style>
</head>
<body>
     <p style="font-size:1px">font-size:1px，这是1号字体</p>
     <p style="font-size:2px">font-size:2px，这是2号字体</p>
     <p style="font-size:3px">font-size:3px，这是3号字体</p>
     <p style="font-size:4px">font-size:4px，这是4号字体</p>
     <p style="font-size:5px">font-size:5px，这是5号字体</p>
     <p style="font-size:6px">font-size:6px，这是6号字体</p>
     <p style="font-size:7px">font-size:7px，这是7号字体</p>
     <p style="font-size:8px">font-size:8px，这是8号字体</p>
     <p style="font-size:9px">font-size:9px，这是9号字体</p>
     <p style="font-size:10px">font-size:10px，这是10号字体</p>
     <p style="font-size:11px">font-size:11px，这是11号字体</p>
     <p style="font-size:12px">font-size:12px，这是12号字体</p>
     <p style="font-size:13px">font-size:13px，这是13号字体</p>
     <p style="font-size:14px">font-size:14px，这是14号字体</p>
     <p style="font-size:15px">font-size:15px，这是15号字体</p>
     <p style="font-size:16px">font-size:16px，这是16号字体</p>
     <p style="font-size:17px">font-size:17px，这是17号字体</p>
     <p style="font-size:18px">font-size:18px，这是18号字体</p>
     <p style="font-size:19px">font-size:19px，这是19号字体</p>
     <p style="font-size:20px">font-size:20px，这是20号字体</p>
     <p style="font-size:21px">font-size:21px，这是21号字体</p>
     <p style="font-size:22px">font-size:22px，这是22号字体</p>
     <p style="font-size:23px">font-size:23px，这是23号字体</p>
     <p style="font-size:24px">font-size:24px，这是24号字体</p>
     <p style="font-size:25px">font-size:25px，这是25号字体</p>
     <p style="font-size:26px">font-size:26px，这是26号字体</p>
     <p style="font-size:27px">font-size:27px，这是27号字体</p>
     <p style="font-size:28px">font-size:28px，这是28号字体</p>
     <p style="font-size:29px">font-size:29px，这是29号字体</p>
     <p style="font-size:30px">font-size:30px，这是30号字体</p>
     <p style="font-size:31px">font-size:31px，这是31号字体</p>
     <p style="font-size:32px">font-size:32px，这是32号字体</p>
     <p style="font-size:33px">font-size:33px，这是33号字体</p>
     <p style="font-size:34px">font-size:34px，这是34号字体</p>
     <p style="font-size:35px">font-size:35px，这是35号字体</p>
     <p style="font-size:36px">font-size:36px，这是36号字体</p>
</body>
</html>
 
二、测试结果：
     1.     iphone6-plus、iphone5：     微信、QQ直接打开、safari中字体可以从最1px字体开始；
     2.     小米2s：微信、QQ浏览器最小显示字体8px；自带浏览器最小字体从1px开始；
     3.     小米4s：firefox可以从最小字体1px开始；chrome中最小显示字体为12px；
     4.     pc：     360安全浏览器7：最小最示12px；firefox与ie10最小显示字体为1px。
     5.     未标明的为未测机型；
 
     结论：移动端最小字体为12px（仅chrome有此限制），建议最小使用12px；
               如果设计稿中有小于12px的字体，按实际字号写css样式；
 
     结论2：   iphone类移动设备不受最小字号限制；
                    其它设备可能会受8px限制；
                    chrome中限制最小12px。
 
     推测：随着手机分辨率不断扩大，字号将不再有限制；
     现象：小米2的截图为720x1080, 10px字实测高度为10px*2-2px=18px；11px实测高度为20px；
     现象2：截图尺寸，很奇怪
                    iphone6plus：639x1136
                    iphone5：640x1136
                    小米2s：720x1280
                    小米4s：540x960
 
 
 
ios7网页使用字体标准：三级别
17px
14px
10px     (从上面的结果可以看到iphone类的设备字号不受12px限制)
字体可使用  黑体简
 
 

 

 

扩展阅读：https://github.com/islittle/Web-Developer/blob/master/css-notes/compatible-with-less-than-12px-fontsize.md   兼容小于12px字体

posted on 2015-05-18 16:34  赫连勃格  阅读(21344)  评论(3)  编辑  收藏  举报

导航