这段时间一直在用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. Go和Python学习计划

    计划虽然不一定能实现,但还是要有的,万一实现了呢. 一.学习Go 1.先看尚雪谷https://www.bilibili.com/video/av48141461/?p=12的go语言全套,把基础的过 ...

  2. 通过注解实现通用导出Excel

    Javaweb开发中数据的导入导出很常见,每次我们都需要写很多代码,所以我就在想能不能写一些通用的方法,之前已经在网上 整理过一些通用的方法,最近在网上看到一位牛人封装的更加简介,自己拿过来整理了一下 ...

  3. Excel批量导入(导出同理)

    在做JavaWeb中添加数据使我们在所难免会遇到的,在大数据的环境下批量添加和批量删除是必须的,而批量删除只需要获取到我们需要删除的ID就可以了,在批量添加中我们就会遇到问题,问题是得到批量的数据,这 ...

  4. 学习Canvas这一篇文章就够了

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  5. java之异常详解

    一.什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域正常运行的情况,称之为异常. 二.异常体系 Java把异常当作对象来处理,并定义一个基类java. ...

  6. 【C语言基础】unsigned short类型用于循环的一个难点

    我在我的知识星球:“C语言解惑课堂”里的第一篇提出一个问题:[第1篇][C语言基础][unsigned short类型用于循环的一个难点]要查看更多的C语言难点解析或者需要提问的同学,微信扫扫文末我的 ...

  7. 学完JavaScript基础有感

    紧接上一篇回来了,这几天一直学js,会不自觉的和其他的编程语言联系在一起,在没有学jQuery之前,结合我所学的c,java,数据结构,数据库以及部分html感觉到JavaScript里面又很多相似的 ...

  8. js中更改this指向 以及回顾bind、call和apply

    1.更改this指向 方法1:对this进行保存            var _this = this; 例: var _this = this;     document.onclick = fu ...

  9. 史上最全面的SignalR系列教程-6、SignalR 实现聊天室

    1.概述 通过前面几篇文章对SignalR的详细介绍.我们知道Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long po ...

  10. 编程题及解题思路（1，String）

    题目描述 请实现一个算法,确定一个字符串的所有字符是否全都不同.这里我们要求不允许使用额外的存储结构. 给定一个string iniString,请返回一个bool值,True代表所有字符全都不同,F ...