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

转载 2015年11月21日 17:26:23

前言:本文纯属转载,详情请参见原文 移动端高清、多屏适配方案 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>

相关文章推荐

弄清移动端网页中viewport、retina、高清图、dp单位等

一直以来,web移动端都有这么几个问题困扰着我: 单位太多,除了px、rem,其他单位到底啥意思? 设计师经常会问前端,我到底按照什么尺寸出设计稿? 高清图怎么做出来的? 边框1px...

移动端多屏适配且保留高清图的做法

背景 1.开发移动端H5页面 2.面对不同分辨率的手机 3.面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到...

移动端高清多屏适配的解决方案

移动端高清、多屏适配方案 转自:http://div.io/topic/1092 背景 开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机 视觉稿 ...
  • J_H_S
  • J_H_S
  • 2017-03-19 14:50
  • 138

移动端H5页面高清多屏适配方案(经典)

视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点:1)首先,选取一款手机的屏幕宽高作为基准(以前是iPho...

深度好文【移动端H5页面高清多屏适配方案】

视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿。 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以...

移动端适配的解决方案

原文参考链接: https://github.com/amfe/article/issues/17移动端适配的flexible解决方案: https://github.com/amfe/lib-f...

Android 多屏适配解决方案

1.主流手机必要测量的参数(通过具体的方法,测量出,需要测试手机的 下面的这些参数,我们主要使用的只是 screenwidth  这个参数,其他参数只是帮助我们更好的理解 屏幕适配) 华为 ht:9...

多屏适配解决方案

一些基本概念:视窗 viewport 简单的理解,viewport是严格等于浏览器的窗口。在桌面浏览器中,viewport就是浏览器窗口的宽度高度。但在移动端设备上就有点复杂。移动端的viewpor...
  • pamki
  • pamki
  • 2017-06-26 11:16
  • 117

cocos2dx3.x+cocostudio多屏幕分辨率适配解决方案(干货)

版本cocos2dx3.3 1.设计分辨率 你配资源使用的分辨率大小,一般是960*640。 2.屏幕分辨率 实际上用户屏幕的分辨率大小。 想要了解更多建议阅读http://www.tairan.co...

Cocos2dx:3.10+cocostudio多屏幕分辨率适配解决方案

1.设计分辨率 配资源使用的分辨率大小,是1334*750。 2.屏幕分辨率 实际上用户屏幕的分辨率大小,不确定。 这里是实现代码: // /...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)