问题:不同手机型号屏幕尺寸大不相同,导致同样的文字,有的显示一行,有的显示多行。

通过查资料和自己的尝试解决;网页开发习惯的px单位,手机html开发不适用。

源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--防止手机页面缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>Document</title>
</head>
<body>
<!-- 文字单位设置为rem即可,通过微信开发者工具切换手机型号查看效果。 -->
<div style='border:1px red solid;border-radius:100px;font-size:1rem;'>测试手机端文字的自适应</div>
</body>
<script> /* 利用js计算当前设备的DPR,动态设置在html标签上,并动态设置html的font-size,*/
!function(win, lib) {
var timer,
doc = win.document,
docElem = doc.documentElement, vpMeta = doc.querySelector('meta[name="viewport"]'),
flexMeta = doc.querySelector('meta[name="flexible"]'), dpr = 0,
scale = 0, flexible = lib.flexible || (lib.flexible = {}); // 设置了 viewport meta
if (vpMeta) { console.warn("将根据已有的meta标签来设置缩放比例");
var initial = vpMeta.getAttribute("content").match(/initial\-scale=([\d\.]+)/); if (initial) {
scale = parseFloat(initial[1]); // 已设置的 initialScale
dpr = parseInt(1 / scale); // 设备像素比 devicePixelRatio
} }
// 设置了 flexible Meta
else if (flexMeta) {
var flexMetaContent = flexMeta.getAttribute("content");
if (flexMetaContent) { var initial = flexMetaContent.match(/initial\-dpr=([\d\.]+)/),
maximum = flexMetaContent.match(/maximum\-dpr=([\d\.]+)/); if (initial) {
dpr = parseFloat(initial[1]);
scale = parseFloat((1 / dpr).toFixed(2));
} if (maximum) {
dpr = parseFloat(maximum[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
} // viewport 或 flexible
// meta 均未设置
if (!dpr && !scale) {
// QST
// 这里的 第一句有什么用 ?
// 和 Android 有毛关系 ?
var u = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi)),
_dpr = win.devicePixelRatio; // 所以这里似乎是将所有 Android 设备都设置为 1 了
dpr = u ? ( (_dpr >= 3 && (!dpr || dpr >= 3))
? 3
: (_dpr >= 2 && (!dpr || dpr >= 2))
? 2
: 1
)
: 1; scale = 1 / dpr;
} docElem.setAttribute("data-dpr", dpr); // 插入 viewport meta
if (!vpMeta) {
vpMeta = doc.createElement("meta"); vpMeta.setAttribute("name", "viewport");
vpMeta.setAttribute("content",
"initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no"); if (docElem.firstElementChild) {
docElem.firstElementChild.appendChild(vpMeta)
} else {
var div = doc.createElement("div");
div.appendChild(vpMeta);
doc.write(div.innerHTML);
}
} function setFontSize() {
var winWidth = docElem.getBoundingClientRect().width; if (winWidth / dpr > 540) {
(winWidth = 540 * dpr);
} // 根节点 fontSize 根据宽度决定
var baseSize = winWidth / 10; docElem.style.fontSize = baseSize + "px";
flexible.rem = win.rem = baseSize;
} // 调整窗口时重置
win.addEventListener("resize", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false); // 这一段是我自己加的
// orientationchange 时也需要重算下吧
win.addEventListener("orientationchange", function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false); // pageshow
// keyword: 倒退 缓存相关
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false); // 设置基准字体
if ("complete" === doc.readyState) {
doc.body.style.fontSize = 12 * dpr + "px";
} else {
doc.addEventListener("DOMContentLoaded", function() {
doc.body.style.fontSize = 12 * dpr + "px";
}, false);
} setFontSize(); flexible.dpr = win.dpr = dpr; flexible.refreshRem = setFontSize; flexible.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
if ("string" == typeof d && d.match(/rem$/)) {
c += "px";
}
return c;
}; flexible.px2rem = function(d) {
var c = parseFloat(d) / this.rem; if ("string" == typeof d && d.match(/px$/)) {
c += "rem";
}
return c;
}
}(window, window.lib || (window.lib = {})); </script>
</html>

手机html根据手机分辨率网页文字大小自适应的更多相关文章

  1. js根据浏览器窗口大小实时改变网页文字大小

    目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码: &l ...

  2. 用javascript动态改变网页文字大小

    <script>function setFontSize(size){document.getElementById('bottom').style.fontsize=size+'pt'; ...

  3. [转]响应式网页设计:rem、em设置网页字体大小自适应

    本文转自:http://www.cnblogs.com/aimyfly/archive/2013/07/19/3200742.html 「rem」是指根元素(root element,html)的字体 ...

  4. 响应式网页:用em,rem设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  5. 响应式网页设计:rem、em设置网页字体大小自适应

    「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px.这样一个新的 ...

  6. UIlabel文字大小自适应label宽度变大变小

    label.adjustsFontSizeToFitWidth = YES;   //默认no

  7. android手机和ios手机的分辨率

    Android手机目前常见的分辨率 1.1 手机常见分辨率: 4:3 VGA     640*480 (Video Graphics Array) QVGA  320*240 (Quarter VGA ...

  8. html,CSS文字大小单位px、em、pt的关系换算

    html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...

  9. CSS文字大小单位px、em、pt详解

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

随机推荐

  1. Bresenham直线算法与画圆算法

    在我们内部开发使用的一个工具中,我们需要几乎从 0 开始实现一个高效的二维图像渲染引擎.比较幸运的是,我们只需要画直线.圆以及矩形,其中比较复杂的是画直线和圆.画直线和圆已经有非常多的成熟的算法了,我 ...

  2. 20155303狄惟佳预备作业三Linux学习笔记

    20155303狄惟佳预备作业三Linux学习笔记 初次接触Ubuntu系统以及Linux内核,了解了其产生的历史,从感性来讲,深深吸引我的是其中蕴含的珍贵的开源精神,以及Stallman等人对&qu ...

  3. sqlplus设置长度

    1.set linesize   100 2.col  XX format  a30 3.col  XXX format 9,999,999,999 3.set heading off  表头不显示

  4. aarch64_n3

    ntp-doc-4.2.8p10-1.fc26.noarch.rpm 2017-03-24 02:07 1.2M fedora Mirroring Project ntp-perl-4.2.8p10- ...

  5. python实现单单链表

    # -*- coding: utf-8 -*- # @Time : 2018/9/28 22:09 # @Author : cxa # @File : node.py # @Software: PyC ...

  6. iframe内部刷新后跳转锚点

    开发过程中需要在iframe内容页中点击刷新按钮刷新页面并跳转至页面底部,编写js函数在url后面加上锚点名称#mao,但发现并未达到预期效果,通过测试发现锚点只有在第一次访问页面的时候才会生效,所有 ...

  7. webpack轻松入门教程

    webpack之傻瓜式教程及前端自动化入门 接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpa ...

  8. git —— 远程仓库(创建)

    一.SSH设置 1.创建SSH Key 在用户主目录下,看看有没有.ssh目录, 如果有,再看看这个目录下 有没有id_rsa和id_rsa.pub这两个文件, 如果已经有了,可直接 跳到下一步. 如 ...

  9. maven pom.xml配置

    <repositories> <repository> <id>central</id> <name>Maven Repository Sw ...

  10. 获取矩形局域的方法,Rect、Bounds、Point

    获取一个点和矩形区域的方法如下: var R: TRect; procedure TForm5.FormCreate(Sender: TObject); begin RadioGroup1.Items ...