移动端H5开发常用技巧

267 阅读2分钟

常用的meta属性设置

HTML

<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转

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

<meta name="browsermode" content="application">     //UC应用模式,使用了application这种应用模式后,页面讲默认全屏,禁止长按菜单,禁止收拾,标准排版,以及强制图片显示。

<meta name="x5-orientation" content="portrait">     //QQ强制竖屏

<meta name="x5-fullscreen" content="true">          //QQ强制全屏

<meta name="x5-page-mode" content="app">            //QQ应用模式

CSS

清除输入框内阴影-ios

div { -webkit-appearance: none; }

如何禁止保存或拷贝图像

img { -webkit-touch-callout: none; }

android系统中元素被点击时产生边框

a,button,input,textarea { 
-webkit-tap-highlight-color: rgba(0,0,0,0) 
-webkit-user-modify:read-write-plaintext-only; }

iOS 滑动不流畅

  1. 在滚动容器上增加滚动 touch 方法
.wrapper { -webkit-overflow-scrolling: touch; }

  1. 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动,超出的部分 body 隐藏。
body { overflow-y: hidden; } .wrapper { overflow-y: auto; }

JS

iOS 上拉边界下拉出现空白

document.body.addEventListener( 'touchmove', function(e) { 

if (e._isScroller) return // 阻止默认事件 

    e.preventDefault() 

}, { passive: false } )

ios 日期转换 NAN 的问题

'yyyy-MM-dd'.replace(/-/g, '/')

软键盘问题

可以通过监听移动端软键盘弹起

window.addEventListener('resize', function() {

  if (

    document.activeElement.tagName === 'INPUT' ||

    document.activeElement.tagName === 'TEXTAREA'

  ) {

    window.setTimeout(function() {

      if ('scrollIntoView' in document.activeElement) {

        document.activeElement.scrollIntoView(false)

      } else {

        document.activeElement.scrollIntoViewIfNeeded(false)

      }

    }, 0)

  }

})

IOS 键盘收起时页面没用回落,底部会留白

通过监听键盘回落时间滚动到原来的位置

window.addEventListener('focusout', function() {

  window.scrollTo(0, 0)

})

input输入框弹起软键盘的解决方案。

var bfscrolltop = document.body.scrollTop

$('input')

  .focus(function() {

    document.body.scrollTop = document.body.scrollHeight

    //console.log(document.body.scrollTop);

  })

  .blur(function() {

    document.body.scrollTop = bfscrolltop

    //console.log(document.body.scrollTop);

  })

IOS 下 fixed 失效的原因: 软键盘唤起后,页面的 fixed 元素将失效,变成了 absolute,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。

方案:禁止页面滚动, 而是让主体部分自己滚动,主体部分高度设为 100%,overflow:scroll

<body>

  <div class='warper'>

    <div class='main'></div>

  <div>

  <div class="fix-bottom"></div>

</body>

CSS
.warper {

  position: absolute;

  width: 100%;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */

}

.fix-bottom {

  position: fixed;

  bottom: 0;

  width: 100%;

}

节流和防抖

节流:是函数在一段时间内的多次调用,仅第一次有效

防抖:函数在一段时间内的多次调用,仅使得最后一次调用有效

节流(throttle):

时间戳方法:

function throttle(func, delay) {
    var last = 0;
    return function () {
        var now = Date.now();
        if (now >= delay + last) {
            func.apply(this, arguments);
            last = now;
        } else {
            console.log("距离上次调用的时间差不满足要求哦");
        }
    }
}

定时器:

function throttle(func, delay) {
    var timer = null;
    return function () {
        if (!timer) {
            func.apply(this, arguments);
            timer = setTimeout(() => {
                timer = null;
            }, delay);
        } else {
            console.log("上一个定时器尚未完成");
        }
    }
}

11.awebp

防抖(debounce)

function debounce(func, delay) {
    var timeout;
    return function() {
        clearTimeout(timeout);
        timeout = setTimeout(()=>{
            func.apply(this, arguments);
        }, delay);
    }
}

22.awebp

原文链接