hotcss.js Flexible 移动端适配在dpr=2和dpr=3出现的字体大小设置不正确问题.
这段时间一直在用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出现的字体大小设置不正确问题.的更多相关文章
- html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式
对于html5移动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿.. ...
- fontresize 移动端的手机字体 大小设置
这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...
- MetaHandler.js:移动端适配各种屏幕
MetaHandler.js !function () { var opt = function() { var ua = navigator.userAgent, android = ua.matc ...
- vue移动端字体大小设置
const setRemUnit = () => { const docEl = document.documentElement; // IPhone6下750像素来设计,实际像素375px, ...
- 更改MyEclipse 之 jsp、js、java、xml文件字体大小设置
1.打开eclipse->window-->prefercess--->general--->appearance-->color and font ----> B ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- 移动端适配(rem单位定义方法)
注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- 移动端适配--flexible.js
引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的 ...
随机推荐
- 完全零基础在Linux中安装 JDK
完全零基础在Linux中安装 JDK 总体思路:先确定没有Java程序了 — 然后创建相应路径文件夹 — 下载JDK — 解压到当前路径 — 自定义文件名称 — 配置环境变量 — 检查是否安装成功 第 ...
- python基础之变量与数据类型
变量在python中变量可以理解为在计算机内存中命名的一个存储空间,可以存储任意类型的数据.变量命名变量名可以使用英文.数字和_命名,且不能用数字开头使用赋值运算符等号“=”用来给变量赋值.变量赋值等 ...
- JS 中构造函数和普通函数的区别
原来只是随意的了解了下 , 但是最近有点忘了 于是详细了解下 加深下印象. 1.构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写 2.构造函数和普通函数的区别在于:调用方式 ...
- 【错误】【vscode】输出中文是乱码问题
- 发布一个自己的jar包给全球人使用
目录 项目准备 sonatype 注册 申请sonatype工单 gpg配置 项目配置 依赖oss-parent 自定义配置 pom配置 全局settings配置 发布 验证 maven 项目对于我们 ...
- centos7之Python3.74安装
安装版本:Python3.74 系统版本:centos7 系统默认安装Python2.7,保留. 安装/usr/bin/Python3 安装需要root权限. 安装Python3的准备工作: 1.安装 ...
- ZooKeeper系列(三)—— Zookeeper 常用 Shell 命令
一.节点增删改查 1.1 启动服务和连接服务 # 启动服务 bin/zkServer.sh start #连接服务 不指定服务地址则默认连接到localhost:2181 zkCli.sh -serv ...
- python匿名函数的介绍及用途
匿名函数 用lambda能够创建一个匿名函数,这中函数得名于省略了用def声明函数的标准步骤. 语法 lambda [arg1 [,arg2,.....argn]]:expression 如何使用 我 ...
- 1.Apache的配置
1.phpStudy的目录结构 1.1phpStudy的主目录路径:F:\phpStudy 1.2Apache的主目录路径 2.Apache启动和停止方法 2.1.通过任务栏phpStudy 图片进行 ...
- oracle 正则表达的使用
最近遇到有个项目,需要根据文件存储的根目录地址来判断是在云端获取,还是本地获取, 先看下具体有几个不同的根目录: , , 'i') from pmc.designmaterial d 去重关键字:di ...