7.26 移动端

时间 2019-11-30

标签 7.26 移动栏目无线繁體版

原文原文链接

1. 单位

remjavascript

相对于根元素css

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        /* 20*16px */
        width: 20rem;
        /* 20*16px */
        height: 20rem;
    }
复制代码

emhtml

字体相对于根元素计算，其余元素相对于当前元素java

html{
        /* 1 rem */
        font-size: 16px;
    }
    div{
        font-size: 18px;
        /* 20*18px */
        width: 20em;
        /* 20*18px */
        height: 20em;
    }
复制代码

2. 事件

1. click

相似于PC端的click，但在移动端中，连续click的触发有约300ms的延迟

2. touch

touchstart触摸
touchmove移动
touchend离开
touchcancel系统中止跟踪触摸时（打断）

3. tap

tap点击一下
longTap长按
singleTap碰一下
doubleTap双击

4. swipe

swipe滑动
swipeLeft向左滑动
swipeRight向右滑动
swipeUp向上滑动
swipeDown向下滑动

3. 移动端兼容性问题

1. 设计稿2倍图实现绝对1px的边框（0.5px）安卓系统 ios7如下不⽀持0.5px

缩放、写1px的阴影

<!--css-->
    <style> *{ padding: 0; margin: 0; } div{ width: 2rem; height: 2rem; position: relative; } button{ width: .5rem; height: .3rem; position: absolute; z-index: 2; } div::before{ content: ''; display: block; width: 200%; height: 200%; top: 0; left: 0; border: 1px solid #eeeeee; -webkit-transform: scale(0.5); transform: scale(0.5); transform-origin: 0,0 position: absolute; z-index: 1; } </style>
    <!--html-->
    <body>
        <div>
            <button>点击</button>
        </div>
    </body>
    <!--js-->
    <script> var Obtn = document.getElementsByTagName("button")[0]; Obtn.onclick = function(){ alert("hello world"); } </script>
复制代码

2. 低版本安卓⼿机不⽀持背景⾊渐变，在单独写⼀个背景⾊

background-color:#ff7e33; 
    background-image:linear-gradient(45deg,#ff5303,#ff9143); 
复制代码

3. 低版本⼿机尤为是4.+系统的不支持es6写法

vconsole会报错script error ，但没法查出具体错误须要加垫片babel-polyfillios

4.点击输⼊框拉起键盘输⼊完成后会发现⻚⾯⾼度⽆法被撑开

（安卓手机会出现）从新获取⻚⾯高度并赋值es6

5. 图⽚上传，不一样⼿机的input file展示形式不一样

ios系统⼀般会出现拍照和相册两个选项，安卓手机拍照、相册选择有时只出现⼀项，有时根据系统不一样会展现其余项，12306的webview不⽀持input file 会出现闪退的状况web

6.ios 11系统input光标错位（系统自己缘由）

解决方法babel

7.页面滑动吸顶或吸底效果，手机qq的webview里没法拉动

须要阻止页面的默认动做app

8.ios系统的input框会有⼀个隐形须要去掉

-webkit-appearance: none; 
复制代码

9.有的⼿机input placeholder⽆法垂直居中

能够设置input高度小⼀点而后上下加padding字体

网上的解决方式line-height：normal