zoukankan      html  css  js  c++  java
  • 几种常用移动端和pc端兼容标准

    1、移动端版本兼容 用px
    	var jsVer = 15;
    	var phoneWidth = parseInt(window.screen.width);
    	var phoneScale = phoneWidth/640;
    	var ua = navigator.userAgent;
    	if (/Android (d+.d+)/.test(ua)){
    		var version = parseFloat(RegExp.$1);
    		// andriod 2.3
    		if(version>2.3){
    			document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    		// andriod 2.3以上
    		}else{
    			document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    		}
    		// 其他系统
    	} else {
    		document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    	}
    
    //移动端版本兼容 end
    
    
    2、移动端版本兼容  用rem

    function rePosition(){
    var width = document.documentElement.clientWidth || document.body.clientWidth;
    var ratio = width/750;
    if(width<=750){
    document.getElementsByTagName('html')[0].style.fontSize=100*ratio+"px";
    }else{
    document.getElementsByTagName('html')[0].style.fontSize="100px";
    }
    }
    rePosition();
    window.onresize = function(){
    rePosition();
    };

    //移动端版本兼容 end

    3、pc端响应式:

    (function (doc, win) {
    var doc = doc.documentElement;
    doc.addEventListener('DOMContentLoaded', Resize, false);
    // 当DOM加载后执行
    win.addEventListener('resize', Resize, false);
    if (doc.clientWidth) {
    Resize();
    } else {
    setTimeout(Resize, 100)
    }
    // 当屏幕发生变化时执行
    function Resize() {
    doc.style.fontSize = doc.clientWidth / 19.2 + 'px';
    }
    })(document, window)

  • 相关阅读:
    质数检测器
    《视觉SLAM十四讲》学习日志(一)——预备知识
    C++类的介绍
    Python数据类型解析(基础篇)
    括号匹配详解
    哈夫曼树编码
    分治之归并,快速排序
    洛谷p2216 多次单调队列,扫描矩阵中的最大值减去最小值最的固定大小子矩阵
    洛谷p1886滑动窗口最大最小值 双单调队列
    洛谷p1725 露琪诺 单调队列优化的DP
  • 原文地址:https://www.cnblogs.com/xuyanjiayou/p/13153494.html
Copyright © 2011-2022 走看看