移动端适配、移动端事件，理想视口

禁止滚动条

取消滚动条的默认样式：html{height:100%;overflow:hidden;}
                   body{height:100%;overflow:hidden;}
并在js中写入：document.addEventListener('touchstart',function(event){
                             event.preventDefault();})

移动端事件

changedTouches   触发当前事件手指的列表（默认是一个）【经常使用】
     （当前事件）   
targetTouches    触发当前目标元素上的手指列表（可以是多个）
     （当前元素）
touches          当前屏幕上的手指列表（可以是多个）
     （屏幕上的手指数）
 使用时使用的是 changedTouches[0];
      eg. 获取event事件中的clientX属性__    event.changedTouches[0].clientX

在移动端操作必做的步骤：
    1. <meta name="viewport" content="width=device-width,initial-scale=1.0 />
    2. * {margin:0; padding:0;}    (某些Chrome不能取消默认行为时   *{action-touch:none;})
       html,body{height:100%; overflow:hidden;}
    3. document.addEventListener('touchstart',function(event){
                                         event.preventDefault;})

适配

em：参照元素自身字体的大小（font-size是可继承的属性）
rem：参照html字体的大小 (html{ }中写的font-size大小)
实质：一个css像素在不同设备上包含的物理像素不同，适配是为了实现等比效果

rem适配

（设计图大，需要缩小操作时使用）

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 1rem;
            height: 1rem;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div id="box">
        hc
    </div>
    <script type="text/javascript">
(function(){
        var width=document.documentElement.clientWidth;
        var styleNode=document.createElement('style');
        styleNode.innerHTML='html{font-size:'+ width+'px!important;}';
        document.head.appendChild(styleNode);
    })();




本质：操作html字体大小

优点：使用meta标签
    等比效果
    图片失真不明显

缺点：
    计算复杂

vw:

viewpoint适配

（设计图小，需要放大操作时使用）

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div id="box1">
    </div>
    <script type="text/javascript">
        var width=document.documentElement.clientWidth;
        var targetM=320;
        var scale=width/targetM;
        var metaDom=document.querySelector('meta[name="viewport"]');
        metaDom.setAttribute('content','initial-scale=' + scale);
    </script>




本质：改变initial-scale的值

优点：
    等比效果
    没有复杂的计算

缺点：
    没有meta标签
    图片失真明显

initial-scale=1.0

缩放是根据理想视口来计算的

页面有个布局视图，

布局视图在没有设置初始化缩放比例的情况下，

会默认将整个页面缩放到视觉视图，这时就有缩放，

如果设置默认缩放比例为1,则不会产生缩放，滚动条出现

禁止滚动条

取消滚动条的默认样式：html{height:100%;overflow:hidden;}
                   body{height:100%;overflow:hidden;}
并在js中写入：document.addEventListener('touchstart',function(event){
                             event.preventDefault();})

移动端事件

changedTouches   触发当前事件手指的列表（默认是一个）【经常使用】
     （当前事件）   
targetTouches    触发当前目标元素上的手指列表（可以是多个）
     （当前元素）
touches          当前屏幕上的手指列表（可以是多个）
     （屏幕上的手指数）
 使用时使用的是 changedTouches[0];
      eg. 获取event事件中的clientX属性__    event.changedTouches[0].clientX

在移动端操作必做的步骤：
    1. <meta name="viewport" content="width=device-width,initial-scale=1.0 />
    2. * {margin:0; padding:0;}    (某些Chrome不能取消默认行为时   *{action-touch:none;})
       html,body{height:100%; overflow:hidden;}
    3. document.addEventListener('touchstart',function(event){
                                         event.preventDefault;})

适配

em：参照元素自身字体的大小（font-size是可继承的属性）
rem：参照html字体的大小 (html{ }中写的font-size大小)
实质：一个css像素在不同设备上包含的物理像素不同，适配是为了实现等比效果

rem适配

（设计图大，需要缩小操作时使用）

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 1rem;
            height: 1rem;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div id="box">
        hc
    </div>
    <script type="text/javascript">
(function(){
        var width=document.documentElement.clientWidth;
        var styleNode=document.createElement('style');
        styleNode.innerHTML='html{font-size:'+ width+'px!important;}';
        document.head.appendChild(styleNode);
    })();




本质：操作html字体大小

优点：使用meta标签
    等比效果
    图片失真不明显

缺点：
    计算复杂

vw:

viewpoint适配

（设计图小，需要放大操作时使用）

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div id="box1">
    </div>
    <script type="text/javascript">
        var width=document.documentElement.clientWidth;
        var targetM=320;
        var scale=width/targetM;
        var metaDom=document.querySelector('meta[name="viewport"]');
        metaDom.setAttribute('content','initial-scale=' + scale);
    </script>




本质：改变initial-scale的值

优点：
    等比效果
    没有复杂的计算

缺点：
    没有meta标签
    图片失真明显

initial-scale=1.0

缩放是根据理想视口来计算的

页面有个布局视图，

布局视图在没有设置初始化缩放比例的情况下，

会默认将整个页面缩放到视觉视图，这时就有缩放，

如果设置默认缩放比例为1,则不会产生缩放，滚动条出现

来源：CSDN

作者：Amingluo

链接：https://blog.csdn.net/Amingluo/article/details/76611971

标签