关闭

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

标签: 移动前端
177人阅读 评论(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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13549次
    • 积分:468
    • 等级:
    • 排名:千里之外
    • 原创:26篇
    • 转载:14篇
    • 译文:0篇
    • 评论:0条