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

来源：互联网发布：电表数据丢失编辑：程序博客网时间：2024/06/16 16:59

禁止滚动条

取消滚动条的默认样式：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,则不会产生缩放，滚动条出现

阅读全文

0 0