这段时间一直在用hotcss做移动端适配,做了几个页面没有发现什么问题,后来老大要加快进度,我把项目分出一块给另一个同事做,她发现了一个问题就是字体在dpr=2,dpr=3,的设备上字体大小显示老是不正确.

字体明明设置的是34px;computed完成之后偏偏显示的是38.44px;比实际大了不少,并且查找了好多资料页没解决问题,

后来看了下别人的例子,像下边这样写就会显示正确.

,

加了max-height: 100%; display: block;这2个属性突然就好了.测试了下发现,只要将dom元素设置成能设置大小的元素就可以,包括float:left;inline-block等,再加上max-height: 100%;就解决了.

虽然原理没去研究,猜测应该是dpr缩放导致元素计算错误的.

今天又研究了一下,发现只要将max-height: 100%; 加到body下,最高级的父元素问题就解决了,如图:

这样不管他下边元素是什么display格式的都可以,亲测非常方便.
但是试了下加到body上不行.

过了这么长时间,用以上方法解决后,发现这个问题又出现了,在安卓手机UC浏览器上字体大小还是不正确,会变很大.

目前我的解决办法是将元素的高度写死,display为inline-block,block.或者float:left;

发现此问题的朋友们可以根据实际环境去调整.有谁发现更好的办法.可以在下方评论分享给大家.

hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.的更多相关文章

  1. html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

    对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...

  2. fontresize 移动端的手机字体 大小设置

    这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...

  3. MetaHandler.js：移动端适配各种屏幕

    MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...

  4. vue移动端字体大小设置

    const setRemUnit = () => { const docEl = document.documentElement; // IPhone6下750像素来设计,实际像素375px, ...

  5. 更改MyEclipse 之 jsp、js、java、xml文件字体大小设置

    1.打开eclipse->window-->prefercess--->general--->appearance-->color and font ----> B ...

  6. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  7. 移动端适配（rem单位定义方法）

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  8. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  9. 移动端适配--flexible.js

    引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...

随机推荐

  1. AppBoxFuture: 123挨个站-数据按序存储

      最近几天在优化存储的编码规则,顺带把之前设计了但未实现的倒排序一并实现了.由于所有数据(元数据.实体.索引等)都映射至RocksDB的Key-Value存储,所以必须扩展RocksDB的自定义比较 ...

  2. codeforces679A_Bear and Prime 100 交互题

    传送门 第一道交互题 题意: 电脑事先想好了一个数[,] 你会每次问电脑一个数是否是它想的那个数的因数 电脑会告诉你yes或no 至多询问20次 最后要输出它想的数是质数还是合数 思路: 枚举< ...

  3. ext container的使用的场景

    container 是 panel 简化,他称之为容器,而panel则是面板. 如果不需要类似Ext.panel.Panel,Ext.window.Window和Ext.tab.Panel 等功能,则 ...

  4. 初识代理——Proxy

    无处不在的模式——Proxy 最近在看<设计模式之禅>,看到代理模式这一章的时候,发现自己在写spring项目的时候其实很多时候都用到了代理,无论是依赖注入.AOP还是其他,可以说是无处不 ...

  5. 【简洁易懂】CF372C Watching Fireworks is Fun dp + 单调队列优化 dp优化 ACM codeforces

    题目大意 一条街道有$n$个区域. 从左到右编号为$1$到$n$. 相邻区域之间的距离为$1$. 在节日期间,有$m$次烟花要燃放. 第$i$次烟花燃放区域为$a_i$ ,幸福属性为$b_i$,时间为 ...

  6. 什么是Singleton？

    Singleton:在Java中即指单例设计模式,它是软件开发中最常用的设计模式之一. 单:指唯一 例:指实例 单例设计模式,即某个类在整个系统中只能有一个实例对象可被获取和使用的代码模式. 要点: ...

  7. 基于python语言使用余弦相似性算法进行文本相似度分析

    编写此脚本的目的: 本人从事软件测试工作,近两年发现项目成员总会提出一些内容相似的问题,导致开发抱怨.一开始想搜索一下是否有此类工具能支持查重的工作,但并没找到,因此写了这个工具.通过从纸上谈兵到着手 ...

  8. （一）c#Winform自定义控件-基类控件

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  9. CheckListBox怎样得到多选值?

    一般认为:foreach (object obj in checkedListBox1.SelectedItems)即可遍历选中的值.其实这里遍历的只是高亮的值并不是打勾的值.遍历打勾的值要用下面的代 ...

  10. 敏捷开发--必备工具Jira&Confluence学习视频

    敏捷开发必备工具:Jira+confluence,完美组合. 入门培训视频,内含Jira, Confluence, BigGantt, Zephyr, Tempo, Question, ScriptR ...