页面加载自动生成meta标签，做屏幕自适应功能

最新推荐文章于 2021-06-24 23:17:16 发布

John的WEB前端学习日记

最新推荐文章于 2021-06-24 23:17:16 发布

阅读量1k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一种根据设备像素比自动调整视口缩放及HTML根元素字体大小的方法，确保了不同分辨率屏幕上的显示效果一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 
 * viewport scale根据设备像素比自动生成
 * Html根元素font-size根据设备像素比自动生成
 * by MC
 */

(document.DOMContentLoaded = function () {
    var meta = document.createElement("meta"),
        scale = 1.0 / window.devicePixelRatio;
    meta.name = "viewport";
    meta.content = "target-densitydpi=device-dpi,width=device-width,minimum-scale=" + scale + ",maximum-scale=" + scale + ",initial-scale=" + scale + ",user-scalable=no";
    document.head.appendChild(meta);
    document.documentElement.setAttribute("style", "font-size:" + 16 * window.devicePixelRatio + "px");
})();