• 移动端最小字体限制测试


     

    一、通过下面的代码在不同的浏览器里打开进行测试:
    <!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限制)
    字体可使用  黑体简
     
     

  • 相关阅读:
    ACL2019对话、问答相关论文整理
    docker for windows添加卷映射
    聊聊多轮任务型对话那些事
    创建用户故事地图(User Story Mapping)的8个步骤
    关于如何做出好的产品
    知识体系整理
    关于如何做好需求的方法
    使用rasa搭建聊天机器人
    【转载】指代消解笔记
    计算机相关会议排名(一)
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/11326044.html
Copyright © 2020-2023  润新知