移动端杂记 – 云博客

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

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

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

<!–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>