zoukankan      html  css  js  c++  java

  • 移动端rem.js及移动端的一些属性和事件

    

    

    1 (function(){
2     setRem();
3     window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
4     function setRem(){
5         var html = document.documentElement;
6         var width = html.clientWidth;
7         html.style.fontSize = width/16 + "px";
8     }
9 })();
    

    

    


    1 (function(){
2                 var html = document.documentElement;
3                 var hWidth = html.getBoundingClientRect().width;
4 //                console.log( hWidth );
5                 html.style.fontSize = hWidth/16 + "px";
6             })()

    ----------------start--------------

    以下内容参考博客：https://www.cnblogs.com/agansj/p/8243880.html
    

    

    代码一：

window.onload = function(){
    /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
      为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
    getRem(720,100)
};
window.onresize = function(){
    getRem(720,100)
};
function getRem(pwidth,prem){
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    html.style.fontSize = oWidth/pwidth*prem + "px";
}
    

    


    

    代码二： 小米官网的写法

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=720,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>720&&(n=720);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
    

    

    ------------------end----------------------
    

    

    

     1 /*
 2         移动端的三大事件：
 3             手指按下：
 4                 ontouchstart
 5             手指移动：
 6                 ontouchmove
 7             手指抬起
 8                 ontouchend
 9                 
10         注意：
11             在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式(addEventListener)。
12     */
13     
14     var div = document.getElementById('div1');
15     
16 //    div.ontouchstart = function(){
17 //        alert(1);
18 //    }
19 
20     div.addEventListener('touchstart',start);
21     div.addEventListener('touchmove',move);
22     div.addEventListener('touchend',end);
23     function start(){
24         console.log('按下');
25     }
26     function move(){
27         console.log('移动');
28     }
29     function end(){
30         console.log('抬起');
31     }
    

    


    视口设置
    

    

    1 <!--
2     viewport 视口(可视区窗口)
3         默认不设置viewport一般可视区宽度在移动端是980
4         width 可视区的宽度 (number||device-width)
5         user-scalable 是否允许用户缩放 (yes||no) iOS10无效 (我们放在事件章节解决)
6         initial-scale 初始缩放比例
7         minimum-scale 最小缩放比例
8         maximum-scale 最大缩放比例
9 -->
    

    


    适配
    

    

     1 <script type="text/javascript">
 2 (function(){
 3     var w = window.screen.width;
 4     var targetW = 320;
 5     var scale = w/targetW; //当前尺寸/目标尺寸
 6     var meta = document.createElement("meta");
 7     meta.name = "viewport";
 8     meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
 9     //console.log(scale);
10     document.head.appendChild(meta);
11 })();
12 </script>
13 <!--
14 <meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
15 -->
    

    


    像素比
    

    

    1 <script type="text/javascript">
2     alert(window.devicePixelRatio);
3     // n = window.devicePixelRatio
4     //像素比把一个像素 放大至 N个像素去显示 
5     //设计图最少750 
6 </script>
    

    


    x5内核一些特性
    

    

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <meta name="viewport" content="width=device-width,user-scalable=no">
 7 <meta name="x5-orientation" content="portrait" />
 8 <meta name="x5-fullscreen" content="true" />
 9 <meta name="screen-orientation" content="portrait">
10 <meta name="full-screen" content="yes">
11 <meta name="format-detection" content="telephone=no, email=no" />
12 </head>
13 <body>
14     <p>13888888888</p>
15     <a href="tel:18888888888">请拨打电话18888888888</a>
16     <a href="mailto:motao@motao.com">请发送邮件</a>
17 </body>
18 </html>
    

    


    移动端IOS与Android的默认样式去除
    

    

    <style type="text/css">
body {
    font-family: Helvetica;
}
body * {
    -webkit-text-size-adjust: 100%;
    -webkit-user-select: none; /*在事件章节 去兼容安卓*/
}
a, 
input, 
button{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
input, 
button {
    -webkit-appearance: none;
    border-radius: 0;
}
</style>
    

    


    移动端事件基础（pc存在的2个问题）
    

    

     1 <script type="text/javascript">
 2     /*
 3         注意：
 4             在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式(addEventListener)。
 5             
 6         pc上的事件比移动端的事件略慢，大概是在300ms左右。
 7 
 8 
 9                移动端的点透：
10             当上层元素发生点击的时候，下层元素也有点击（焦点）特性，
11             在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到
12             下层元素身上，就会触发点击行为。
13             
14         解决：
15             1.下层不要使用有点击（焦点）特性的元素。
16             
17             2.阻止pc事件。
18         
19         
20     */
21     
22     document.addEventListener('touchstart',function(ev){
23         ev.preventDefault();
24     });
25     
26     
27     var div = document.getElementById('div1');
28     //var p = document.getElementById('p');
29     var a = document.getElementById('a');
30     
31     div.addEventListener('touchend',end);
32     
33 //    p.addEventListener('touchstart',function(){
34 //        alert('1111');
35 //    });
36     
37     a.addEventListener('touchstart',function(){
38         window.location.href = 'http://www.miaov.com';
39     });
40 
41     
42     function end(){
43         this.style.display = 'none';
44     }
45     
46 </script>        
47     
    

    


    移动端阻止pc事件的优点
    

    

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width,user-scalable=no"/>
 6     <title>Document</title>
 7 <style>
 8 body,html{
 9     width: 100%;
10     overflow: hidden;
11 }
12 #div1{
13     width:200px;
14     height: 200px;
15     background: red;
16     position: absolute;
17     top:0;
18     left:0;
19     opacity: .5;
20 }
21 #div2{
22     width:3000px;
23     height: 50px;
24     background: yellow;
25 }    
26 </style>
27 </head>
28 <body>
29     <p id="p">点我呀!</p>
30     <a href="http://www.miaov.com" id="a">点我呀！！！</a>
31     <div id="div1"></div>
32     <div id="div2"></div>
33     <input type="text" name="text" id="txt" value="" />
34 <script type="text/javascript">
35     /*
36         移动端的点透：
37             当上层元素发生点击的时候，下层元素也有点击（焦点）特性，
38             在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到
39             下层元素身上，就会触发点击行为。
40             
41         解决：
42             1.下层不要使用有点击（焦点）特性的元素。
43             
44             2.阻止pc事件。
45             
46             1.IOS10下设置meta禁止用户缩放是不可行的。（使用阻止pc事件就可以在IOS10下禁止用户缩放）
47             
48             2.解决IOS10下溢出隐藏的问题。
49             
50             3.禁止系统默认的滚动条、阻止橡皮筋效果
51             
52             4.禁止长按选中文字、选中图片、系统默认菜单
53             
54             5.解决点透问题
55             
56             6.也阻止了焦点元素的焦点行为(要正常使用：ev.stopPropagation()阻止冒泡)
57     */
58     
59     document.addEventListener('touchstart',function(ev){
60         ev.preventDefault();
61     });
62     
63     
64     var div = document.getElementById('div1');
65     var a = document.getElementById('a');
66     var txt = document.getElementById('txt');
67     
68     div.addEventListener('touchend',end);
69     
70     a.addEventListener('touchstart',function(){
71         window.location.href = 'http://www.miaov.com';
72     });
73 
74     txt.addEventListener('touchstart',function(ev){
75         ev.stopPropagation();
76     });
77     
78     function end(){
79         this.style.display = 'none';
80     }
81     
82     
83     
84     
85 </script>
86 </body>
87 </html>
    

    


    移动端的事件对象
    

    

     1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <meta name="viewport" content="width=device-width,user-scalable=no"/>
 6     <title>Document</title>
 7 <style>
 8 body,html{
 9     width: 100%;
10     overflow: hidden;
11 }
12 #div1{
13     width:200px;
14     height: 200px;
15     background: red;
16     position: absolute;
17     top:0;
18     left:0;
19     font-size:50px;
20     color: #fff;
21 }    
22 </style>
23 </head>
24 <body>
25     <div id="div1"></div>
26 <script type="text/javascript">
27     /*
28         当给某个元素加上了事件绑定函数之后，事件函数默认的第一个参数就是事件对象
29         事件对象：
30             当用户在浏览器下触发了某个行为，事件对象会记录用户操作时一些细节信息。
31         
32         touches 当前位于*屏幕*上的所有手指的一个列表
33 
34         targetTouches 位于当前DOM元素上的手指的一个列表
35 
36         changedTouches  涉及当前事件的手指的一个列表
37             
38     */
39     document.addEventListener('touchstart',function(ev){//阻止pc和浏览器的默认行为
40         ev.preventDefault();
41     });
42     var div = document.getElementById('div1');
43     
44     
45     div.addEventListener('touchmove',start);
46     function start(ev){
47         //this.innerHTML = ev.touches.length;
48         //this.innerHTML = ev.targetTouches.length;
49         this.innerHTML = ev.changedTouches.length;
50     }
51     
52     
53 </script>
54 </body>
55 </html>
    

    



    加速度改变时触发 devicemotion 事件
    

    

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: Red;
12     color: #fff;
13     font-size: 20px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 (function(){
21     var box = document.querySelector('#box');
22     window.addEventListener('devicemotion', function(e) {
23         var motion = e.accelerationIncludingGravity;
24         var x = Math.round(motion.x);
25         var y = Math.round(motion.y);
26         var z = Math.round(motion.z;
27         box.innerHTML = "x:"+x;
28         box.innerHTML += "<br/>y:"+y;
29         box.innerHTML += "<br/>z:"+z;
30     });
31 })();    
32 </script>
33 </body>
34 </html>
    

    


    判断手机是 ios 还是 android 设备
    

    

    1 <script type="text/javascript">
2 var u = navigator.userAgent;
3 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
4 var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
5 console.log(isiOS);
6 </script>
    

    


    处理 ios 和 android 设备 对重力加速度的兼容性问题
    

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
#box {
    width: 200px;
    height: 200px;
    background: Red;
    color: #fff;
    font-size: 20px;
}    
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
(function(){
    var box = document.querySelector('#box');
    window.addEventListener('devicemotion', function(e) {
        var motion = e.accelerationIncludingGravity;
        var x = Math.round(motion.x);
        var y = Math.round(motion.y);
        var z = Math.round(motion.z);
        if(getAdr()){
            x = -x;
            y = -y;
            z = -z;
        }
        box.innerHTML = "x:"+x;
        box.innerHTML += "<br/>y:"+y;
        box.innerHTML += "<br/>z:"+z;
    });
})();    
function getAdr(){
    var u = navigator.userAgent;
    return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 
}
</script>
</body>
</html>
    

    


    手机摇一摇
    

    

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 </head>
 8 <body>
 9 <script type="text/javascript">
10 (function(){
11     var lastX;
12     var lastY;
13     var lastZ;
14     var maxRang = 80;
15     var minRang = 10;
16     var isShake = false;
    // 摇一摇 记录上次的加速度，和当前次的加速度相减 差值大于一定幅度的时候，就可以认定用户在进行摇一摇
    
    17     window.addEventListener('devicemotion', function(e) {
18         var motion = e.accelerationIncludingGravity;
19         var x = Math.round(motion.x);
20         var y = Math.round(motion.y);
21         var z = Math.round(motion.z);
22         if(typeof lastX == "undefined"){
23             lastX = x;
24             lastY = y;
25             lastZ = z;
26             return;
27         }
28         var dis = Math.abs(x - lastX) + Math.abs(y - lastY) +
29         Math.abs(z - lastZ);
30         if(dis > maxRang) {
31             isShake = true;
32         }
33         if(dis < minRang && isShake) {
34             isShake = false;
35             //执行 摇一摇之后，要操作的内容
36             alert("您晃动了手机");
37         }
38         lastX = x;
39         lastY = y;
40         lastZ = z;
41     });
42 })();
43 </script>
44 </body>
45 </html>
    

    


    检测手机的横竖屏切换
    

    

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no" />
<title>Document</title>
<style type="text/css">
body,
html {
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}    
#box {
    width: 100%;
    height: 100%;
    font-size: 20px;
    position: relative;
}
#div {
    width: 100px;
    height: 100px;
    background: red;
}
#pop {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    line-height: 200px;
    font-size: 30px;
    text-align: center;
}
</style>
</head>
<body>
<div id="box">
    请保持竖屏观看哟
    <div id="div"></div>
</div>
<div id="pop">请不要横屏浏览页面</div>
<script type="text/javascript">
setChange();
window.addEventListener('orientationchange', function(e)
{
    setChange()
});
function setChange(){
    var pop = document.querySelector('#pop');
    if(window.orientation == 90 || window.orientation == -90)
    {
        pop.style.display = "block";
    } else {
        pop.style.display = "none";
    }
}
</script>
</body>
</html>
    

    



    检测手机的角度切换
    

    

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,user-scalable=no" />
 6 <title>Document</title>
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: Red;
12     color: #fff;
13     font-size: 20px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 (function(){
21     var box = document.querySelector('#box');
22     window.addEventListener('deviceorientation', function(e) 
23     {
24         var x = Math.round(e.beta);
25         var y = Math.round(e.gamma);
26         var z = Math.round(e.alpha);
27         box.innerHTML = "x:"+x;
28         box.innerHTML += "<br/>y:"+y;
29         box.innerHTML += "<br/>z:"+z;
30     });
31 })();    
32 </script>
33 </body>
34 </html>
    

    



    多指操作
    

    

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 <meta name="viewport" content="width=device-width,user-scalable=no" />
 7 <style type="text/css">
 8 #box {
 9     width: 200px;
10     height: 200px;
11     background: red;
12     color: #fff;
13     font-size: 30px;
14 }    
15 </style>
16 </head>
17 <body>
18 <div id="box"></div>
19 <script type="text/javascript">
20 document.addEventListener('touchstart', function(e) {
21     e.preventDefault();
22 });
23 window.onload = function(){
24     var box = document.querySelector('#box');
25     /*
26         当手指触摸元素，当前屏幕上有两根或者两根以上的手指执行
27     */
28     box.addEventListener('gesturestart', function(e) {
29         this.style.background = "blue";
30     });
31     /*
32         当我们触发了 gesturestart时，手指位置发生变化时执行
33     */
34     box.addEventListener('gesturechange', function(e) {
35         //e.scale; 缩放比：change时两根手指之间距离 和 start时两根手指之间的距离比值
36         //this.innerHTML = e.scale;
37         //e.rotation 旋转差: change时两根手指形成的直线和start时两根手指形成的直线，中间形成夹角
38         this.innerHTML = e.rotation;
39     });
40     /*
41         当我们触发了 gesturestart时，然后抬起手指，这时屏幕上的手指个少于2个或者当前元素没有手指了，就会触发gestureend
42     */
43     box.addEventListener('gestureend', function(e) {
44         this.style.background = "red";
45     });
46 };
47 </script>
48 </body>
49 </html>
    

    



    封装多指操作
    

    

      1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <title>Document</title>
  6 <meta name="viewport" content="width=device-width,user-scalable=no" />
  7 <style type="text/css">
  8 #box {
  9     margin: 100px auto;
 10     width: 200px;
 11     height: 200px;
 12     background: url(1.jpg) no-repeat;
 13     background-size: cover;
 14 }    
 15 </style>
 16 </head>
 17 <body>
 18 <div id="box"></div>
 19 <script type="text/javascript" src="m.Tween.js"></script>
 20 <script type="text/javascript">
 21 document.addEventListener('touchstart', function(e) {
 22     e.preventDefault();
 23 });
 24 window.onload = function(){
 25     var box = document.querySelector('#box');
 26     var startRotate = 0;
 27     var startScale = 0;
 28     css(box,"translateZ",0.01);
 29     setGesture({
 30         el: box,
 31         start: function(e){
 32             //startRotate = css(this,"rotate");
 33             startScale = css(this,"scale");
 34         },
 35         change:function(e){
 36             css(this,"rotate",startRotate + e.rotation);
 37             css(this,"scale",startScale * e.scale);
 38         }
 39     })
 40 };
 41 /*
 42     init:{
 43         el:element//元素, (必填)
 44         start:fn//gesturestart要做的操作,
 45         change:fn//gesturechange要做的操作,
 46         end:fn//gestureend要做的操作
 47     }
 48 
 49     勾股定理：已知直角三角形的两条直角边，求斜边的长度
 50 
 51      斜边*斜边 = (直角1*直角1) + (直角2*直角2)
 52 */
 53 function getDis(point1,point2){
 54     var x = point2.x - point1.x;
 55     var y = point2.y - point1.y;
 56     return Math.sqrt(x*x + y*y);
 57 }
 58 // Math.atan2(y,x) 斜率 由一条直线与X轴正方向所成角的正切 返回值弧度
 59 // 角度转弧度: deg*Math.PI/180
 60 //弧度转角度: rad*180/Math.PI 
 61 function getDeg(point1,point2){
 62     var x = point2.x - point1.x;
 63     var y = point2.y - point1.y;
 64     return Math.atan2(y,x)*180/Math.PI; 
 65 }
 66 function setGesture(init){
 67     var el = init.el;
 68     var isGestrue = false; 
 69     var startPoint = [];
 70     if(!el){
 71         return;
 72     }
 73     el.addEventListener('touchstart', function(e) {
 74         if(e.touches.length >= 2){
 75             isGestrue = true; //记录当前用户触发了gesture
 76             startPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
 77             startPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY}; 
 78             init.start&&init.start.call(el,e);
 79         }
 80     });
 81     el.addEventListener('touchmove', function(e) {
 82         if(isGestrue&&e.touches.length >= 2){
 83             var nowPoint = [];
 84             nowPoint[0] = {x:e.touches[0].pageX,y:e.touches[0].pageY};
 85             nowPoint[1] = {x:e.touches[1].pageX,y:e.touches[1].pageY};
 86             var startDis = getDis(startPoint[0],startPoint[1]);
 87             var nowDis = getDis(nowPoint[0],nowPoint[1]);
 88             var startDeg = getDeg(startPoint[0],startPoint[1]);
 89             var nowDeg = getDeg(nowPoint[0],nowPoint[1]);
 90             e.scale = nowDis/startDis;
 91             e.rotation = nowDeg - startDeg;
 92             init.change&&init.change.call(el,e);
 93         }
 94     });
 95     el.addEventListener('touchend', function(e) {
 96         if(isGestrue){
 97             if(e.touches.length < 2 || e.targetTouches.length < 1){
 98                 isGestrue = false;
 99                 init.end&&init.end.call(el,e);
100             }
101         }
102     });
103 }
104 </script>
105 </body>
106 </html>
    

    


    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  IntelliJ IDEA常用的快捷键积累总结
                    
    Linux命令（六）之防火墙iptables的相关操作以及端口的开放
                    
    Linux命令（五）之service服务查找、启动/停止等相关操作
                    
    Linux命令（四）之常用文件拷贝/移动，文件解压缩，文件查找等相关的操作
                    
    Linux命令（三）vim编辑器的常用命令
                    
    Linux命令（一）之目录结构、Linux终端操作、关机重启等一些基本操作
                    
    zookeeper核心知识与投票机制详解
                    
    zuul开发实战（限流，超时解决）
                    
    IO多路复用技术详解
                    
    Linux五大网络IO模型图解
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/helena000/p/10430304.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看