为什么font size大小-size在移动端设置的大小与实际渲染大小不一致？

来源：蜘蛛抓取(WebSpider) 时间：2018-06-10 02:09 标签： font size大小

抄袭、复制答案以达到刷声望汾或其他目的的行为，在CSDN问答是严格禁止的,一经发现立刻封号是时候展现真正的技术了！

一、用户修改手机字体设置大小影响App里打开的web页面。


手机字体设置大小影响App的页面。
Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放按照百分百显示。二、用户调整浏览器字体大尛影响的是从浏览器打开的web页浏览器设置字体大小，影响浏览器打开的页面通过js可控制用户修改字体大小，使页面不受影响

// 用原生方法获取用户设置的浏览器的字体大小(兼容ie) // 取整后与默认16px的比例系数 // 设置rem的js设置的字体大小 // 设置rem的js设置的字体大小 // 最终的字体大小为rem字体/系数

在不同的移动终端设备中实现UI設计稿的等比例适配。

布局排版都用rem做单位然后不同宽度的屏，js动态计算根节点的font size大小-size

假设设计稿是宽750px来做的，书写css方便计算考虑根节点的font size大小-size假定为100px，得出设备宽为7.5rem设计稿中标注的任何px数值都可以换算成px/100的rem值。
就是说每一个设备的宽度都定为7.5个rem，然后宽度非750px的設备里就需要用JS对font size大小-size做动态计算。
换算关系为：根节点的font size大小-size=设备宽度/7.5


    

      注：需要考虑到dpr，即一倍屏两倍屏的问题
    

    

      每个浏览器对最小font size夶小-size的支持不尽相同。js动态计算的font size大小-size值太小时会导致超小屏上UI显示效果比预想中的偏大。

      比如font size大小-size计算是10px，但是chrome只支持到12px他就按照12px去渲染了，这就会导致UI偏大了（上面方案中的100px肯定是没有问题的）

    

    

      
        

          
        

        

          
        

        

          
            1px(只测试了主流浏览器，未做充分测试)
          
        

        

          
        

      
    

  

  

    加载中请稍候......
  

  

    

      以上网友发訁只代表其个人观点，不代表新浪网的观点或立场
    

  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 font size大小 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐