移动端高清、多屏适配解决方案参考

最新推荐文章于 2022-09-28 10:46:09 发布

AidanDai

最新推荐文章于 2022-09-28 10:46:09 发布

阅读量844

点赞数

分类专栏： html and css 文章标签：移动前端

html and css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：本文纯属转载，详情请参见原文移动端高清、多屏适配方案 at 前端乱炖 @ Lovesueee

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
<title>retina</title>
<script type="text/javascript">
    window.onload = function(){
        var dpr, rem, scale;
        var docEl = document.documentElement;
        var fontEl = document.createElement('style');
        var metaEl = document.querySelector('meta[name="viewport"]');

        /*(Aidan Dai)
        var bool = (2 && 3);
        var bool2 = (2 && -1);
        var bool3 = (-2 && -1);

        console.log(bool);
        console.log(bool2);
        console.log(bool3);

        var bool = (2 || 3);
        var bool2 = (2 || -1);
        var bool3 = (-2 || -1);

        console.log(bool);
        console.log(bool2);
        console.log(bool3);

        var bool = !-2;
        var bool2 = !2;

        console.log(bool);
        console.log(bool2);
        */

        /*js中(Aidan Dai)
        **含有&&和||逻辑运算符的表达式返回参与该表达式运算数之一
        **含有!逻辑运算符的表达式返回true或false
        */
        //设备像素比: window.devicePixelRatio 
        //设备独立像素：设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素
        //物理像素：一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值
        //位图像素：一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)
        dpr = window.devicePixelRatio || 1;
        //显示器分辨率：clientWidth(Aidan Dai)
        rem = docEl.clientWidth * dpr / 10;

        // 理论上：1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示
        scale = 1 / dpr;

        fontEl.setAttribute("type","text/css");
        // 设置viewport，进行缩放，达到高清效果
        metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

        // 设置data-dpr属性，留作的css hack之用
        docEl.setAttribute('data-dpr', dpr);

        // 动态写入样式
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

        // 给js调用的，某一dpr下rem和px之间的转换函数
        window.rem2px = function(v) {
            v = parseFloat(v);
            return v * rem;
        };
        window.px2rem = function(v) {
            v = parseFloat(v);
            return v / rem;
        };

        window.dpr = dpr;
        window.rem = rem;
    }
</script>
</head>
<body></body>
</html>