移动端问题小计

css文字超出滚动

• html

<div class="box">
    <p class="animate">
        君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪，人生得意须尽欢，莫使金樽空对月
    </p>
</div>

• css

        .box {
            width: 300px;
            margin: 0 auto;
            position: relative;
            border: 1px solid #ff6700;
        }

        .animate {
            padding-left: 20px;
            font-size: 12px;
            color: #000;
            display:inline-block;
            white-space: nowrap;
            animation: 5s wordsLoop linear infinite forwards;
        }

        @keyframes wordsLoop {
            0% {
                transform: translateX(0px);
              
            }
            100% {
            /* translateX的值可根据实际情况调节*/
                transform: translateX(calc(-100% + 280px));
            
            }
        }

移动端超出滚动scroll组件实现

• html

    <div id="out">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
    </div>

• css

        #out {
            width: 300px;
            height: 150px;
            padding:10px 0;
            border:1px solid red;
            overflow-x: scroll;
            display: -webkit-box;
            /*兼容ios允许独立的滚动区域和触摸回弹*/
            -webkit-overflow-scrolling: touch;
        }
        #out::-webkit-scrollbar {
            /* 隐藏滚动条 */
            display: none;
        }
        .inner{
            width: 200px;
            height: 100%;
            margin-right: 10px;
            color: #fff;
            font-size: 80px;
            background: hotpink;
            text-align: center;
            line-height: 150px;
        }

• 使用js赋予初始滑动距离

    var box = document.getElementById('out');
    //scrollTo的具体用法及传参请查看mdn文档
    box.scrollTo({
        left: 100,
        top: 0,
        behavior: 'smooth'//ios中设置behavior无效，具体版本请查看mdn
    })

关于video标签在iso和安卓中的兼容处理

相关链接：HTML5的Video标签的属性,方法和事件汇总

webkit-playsinline和 playsinline可以防止ios中视频播放时自动全屏

<template>
      <video
        id="video"
        width="100%"
        height="100%"
        :src="videoUrl"
        :poster="poster"//封面图
        :autoplay="autoplay"
        webkit-playsinline
        playsinline
        controls
        preload
        controlslist="nodownload" //禁止播放控件的下载功能
        oncontextmenu="return false">
        <source :src="videoUrl" />
      </video>
</template>

• 在安卓apk的webview中，video的api播放方法（document.getElementById('video').play()）不能主动触发，只能用户交互（元素的click，touch事件）后触发有效

vue单页面应用在ios中返回白屏

• 问题描述：

    进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

• 原因分析

    在ios机器上使用webview开发Vue项目时候，go history(-1)， 无法将body的高度拉掉，使得遮住，触发轻点击，方可消除遮罩

• 解决方案实现原理：
  html，body都是100%，#app撑起了父元素的告诉，但是浏览器默认的滚动scroll并不是#app，而是body,某些因素，造成返回history 后，无法复原（ios 的锅），为此，我们将#app 进行了绝对定位，并让它重新成为 scroll 的对象，从而解决问题

• 代码实现

        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        #app {
            width: 100%;
            height: 100%;
            background: #fff;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            position: absolute;
            left: 0;
            top: 0;
        }

webview中使用H5调用微信支付返回问题

• 问题描述
  A页面-->微信支付页面-->支付成功redirect_url指定的页面--->按返回键-->再次进入微信支付页面(bug)--->返回进入A页面

  在跳转微信支付地址时，如果加入redirect_url返回地址，则回退的时候会再次经过支付地址页面，如要解决，请不要增加rediect_url