移动端杂记

Posted 2020-10-06 carol72

1.页面首部要加的meta标签

　　

<meta name="viewport" content="width=device-width,user-scalable=no"/>

<!--QQ强制横屏或者竖屏
portrait 竖屏
landscape 横屏
x5浏览器：qq浏览器、微信 qq内置浏览器
-->

<meta name="x5 orientation" content="portrait"/>

<!--QQ设置全屏-->
<meta name="x5-fullscreen" content="true"/>

<!--UC强制竖屏或横屏显示-->
<meta name="screen-orientation" content="portrait | landscape"/>

<!--UC全屏显示-->
<meta name="full-screen" content="yes"/>

<!--禁止识别电话号码和邮箱号码-->
<meta name="format-detection" content="telephone=no,email=no"/>

　　2.rem适配

　　页面头部加入此行代码原先尺寸除以100即可

　　例如 100px=1rem;

<script>
　　var iScale = 1 / window.devicePixelRatio;
　　var iWidth = document.documentElement.clientWidth;
　　document.getElementsByTagName(‘html‘)[0].style.fontSize = iWidth / 7.5 + ‘px‘;

</script>

3.js原生移动端事件

基本事件：

 

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

 

touches         //位于屏幕上的所有手指的列表

targetTouches   //位于该元素上的所有手指的列表

changedTouches  //涉及当前事件的所有手指的列表

 

每个事件有列表，每个列表还有以下属性：

 

其中坐标常用pageX,pageY：

pageX    //相对于页面的 X 坐标

pageY    //相对于页面的 Y 坐标

clientX  //相对于视区的 X 坐标

clientY  //相对于视区的 Y 坐标

screenX  //相对于屏幕的 X 坐标

screenY  //相对于屏幕的 Y 坐标

 

identifier // 当前触摸点的惟一编号

target   //手指所触摸的 DOM 元素

 

简单的触发时间demo

<script type="text/javascript">
    var oBox=document.getElementById("box");
    var off=document.getElementById("off");
    off.addEventListener(‘touchstart‘,function(){
        oBox.style.display="none";
    }，false)
</script>