这段时间一直在用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. 树莓派 + Windows IoT Core 搭建环境监控系统

    前言:Windows IoT 是微软为嵌入式开发板设计的一种物联网操作系统,运行Windows UWP(C# 开发),可以设计出丰富的交互界面,驱动GPIO,连接一些传感器做有意思的事,本文详细介绍如 ...

  2. Windows的　IIS　部署django项目

    Windows的 IIS 部署django项目 1.安装Windows的IIS 功能(win10为例): (1)进入控制面板  :选择大图标    进入程序和功能 (2)启用或者关闭Windows功能 ...

  3. Git 服务使用搭建集合

    Git 服务使用搭建集合 一.本地Git 仓库搭建与使用 1.Git 概念介绍 版本控制系统 版本控制是一种记录若干文件内容变化,以便将来查阅特定版本修订情况的系统.大部分时候我们使用最频繁的还是对源 ...

  4. koa2基于stream(流)进行文件上传和下载

    阅读目录 一:上传文件(包括单个文件或多个文件上传) 二:下载文件 回到顶部 一:上传文件(包括单个文件或多个文件上传) 在之前一篇文章,我们了解到nodejs中的流的概念,也了解到了使用流的优点,具 ...

  5. Winform DataGridView 取消默认选中行

    困境 网上有很多解决方法,可是很多读者照做并不生效.追究其原因,问题出现在许多博主没有搞清楚DataGridView绑定与当前触发事件的关系. 复现 private void Frm_Load(obj ...

  6. Cannot attach the file “MvcMovie.mdf” as database “aspnet-MvcMovie”

    今天在微软开发人员官网上学习asp.net mvc5入门的时候,遇到一个棘手的问题,我是按照教程一步一步操作的,但期间遇到一个自己觉得莫名其妙的问题,教程中也没有提到这个, 在添加新字段这一章节,跟着 ...

  7. 全球十大OTA　谁能有一席之地？

    全球十大OTA 谁能有一席之地? http://www.traveldaily.cn/article/78381/1 2014-03-05 来源:i黑马 随着旅游行业日新月异的发展,在线旅游网站的出现 ...

  8. K8S搭建-1 Master 2 Workers（dashboard+ingress）

    本文讲述k8s最新版的搭建(v1.15.2) 分如下几个topic步骤: 各个节点的基本配置 master节点的构建 worker节点的构建 安装dashboard 安装ingress 常见命令 do ...

  9. serverless在微店node领域的探索应用

    背景 目前微店中台团队为了满足公司大部分产品.运营以及部分后端开发人员的尝鲜和试错的需求,提供了一套基于图形化搭建的服务端接口交付方案,利用该方案及提供的系统可生成一副包含运行时环境定义可立即运行的工 ...

  10. Linux配置部署_新手向（二）——Nginx安装与配置

    目录 前言 Nginx 配置(后续补充) 小结 @ 前言 上一篇整完Linux系统的安装,紧接着就开始来安装些常用的东西吧,首先Nginx. Nginx 简介 Nginx作为转发,负载均衡,凭着其高性 ...