移动端问题小计

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

移动端问题小计

上一篇:【C语言天天练(三)】函数


下一篇:如何用Google APIs和Google的应用系统进行集成(7)----在把JSON转换成XML数据过程中,JSON数据中包含违背XML数据规范:XML节点名不能只是数字的Java解决方案