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

通过查资料和自己的尝试解决；网页开发习惯的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. sql server 查询本周、本月所有天数的数据

    查询本月所有的天数: --本月所有的天数 ),) day from (),,)+'-01' day) t1, ( ) t2 ),) ),,)+'%' 查询本周所有的天数: ),,),) ),,),) ...

  2. 【译】第十一篇 Integration Services：日志记录

    本篇文章是Integration Services系列的第十一篇,详细内容请参考原文. 简介在前一篇,我们讨论了事件行为.我们分享了操纵事件冒泡默认行为的方法,介绍了父子模式.在这一篇,我们会配置SS ...

  3. [Openwrt扩展中篇]添加Aria2和webui

    上一篇说了我构建了简单的网络硬盘,这一篇说的是我构造的aria2和webui,大概是这样我觉得有了网络硬盘,那么我是不是可以远程下载呢,翻阅了网上资料发现迅雷的Xware貌似不更新了,然后我发现了ar ...

  4. GRUB (简体中文)

    原文链接:https://wiki.archlinux.org/index.php/GRUB_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87) 前言 引导程序是计算机启动时 ...

  5. 关于root

    1.root优缺 android的root跟苹果越狱很类似,可以享受"解禁"后的很多自由. 1.删除系统中不需要的一些app,特别是一些厂商强制安装的app. 2.美化系统,例如修 ...

  6. shell脚本实现监控shell脚本的执行流程及变量的值

    这篇文章主要介绍了shell脚本实现监控shell脚本的执行流程及变量的值本文使用shell完成对执行过程中条件语句中的变量的变化的监控和整个程序的执行流程的观察功能,需要的朋友可以参考下 很多时候, ...

  7. mipi 调试经验【转】

    转自:http://blog.csdn.net/g_salamander/article/details/9163455 版权声明:本文为博主原创文章,未经博主允许不得转载. 以下是最近几个月在调试 ...

  8. 六、springcloud之配置中心Config

    一.配置中心提供的核心功能 Spring Cloud Config为服务端和客户端提供了分布式系统的外部化配置支持.配置服务器为各应用的所有环境提供了一个中心化的外部配置.它实现了对服务端和客户端对S ...

  9. 十三、springboot集成定时任务(Scheduling Tasks)

    定时任务(Scheduling Tasks) 在springboot创建定时任务比较简单,只需2步: 1.在程序的入口加上@EnableScheduling注解. 2.在定时方法上加@Schedule ...

  10. 04 Effective Go 高效的go语言 重点内容

    Effective Go  高效的go语言 Introduction 介绍 Examples 例子 Formatting 格式 Commentary 评论 Names 名字 Package names ...