移动端等疑难杂症，更新...

此笔记就是记录日常开发遇到的bug,基于vue开发的。很多都是过了很久才从微信收藏扒出来的
工作忙的话鬼有时间写博客，能写个微信笔记丢收藏就不错了。
为了方便，大部分都是从项目中稍微改改就拿过了，有些不能直接使用实属正常。
记笔记吧，主要还是为了自己，当然能帮到人就是意外好事了...此处省略感慨

touch解决某普通页面要求滑动翻页问题

参考文献：https://www.jb51.net/article/264638.htm
VueTouch插件

<div class="page" @touchmove="move($event)" @touchstart="start" @touchend="end"></div>

 start(e) {
      this.start1.X = e.targetTouches[0].pageX
      this.start1.Y = e.targetTouches[0].pageY
    },
    move(e) {
      this.end1.X = e.targetTouches[0].pageX
      this.end1.Y = e.targetTouches[0].pageY
    },
    end(e) {
     if (this.start1.Y - this.end1.Y < 20) {
     //向上滑，触摸结束执行回到上一页
       this.$router.back()
      }
    },

visibilitychange解决倒计时切换后台停止问题

 activated() {
    // APP切换到后台，倒计时会停止，进入前台就需要重新请求接口
    document.addEventListener("visibilitychange", this.showChange);
  },
  deactivated() {
   //组件销毁时一定要清楚visibilitychange事件
    document.removeEventListener("visibilitychange", this.showChange);
  },
  methods:{
    /**
     * @description 切换出去后，进入页面需要重新请求接口
     */
    showChange() {
      if (document.hidden) {
	    //切换后台时，清楚倒计时
        clearInterval(this.timer);
      } else {
	   //切换前台，重新调用倒计时
        this.handleBalanceCountDown();
      }
    },

    /**
     * @description 处理众筹倒计时
     */
    handleCountDown() {
      this.$api.xxx.then((res) => {
	   let {currentTime,endTime} = res.data;
        this.nowTime = currentTime;
        this.endTime = endTime;
        clearInterval(this.timer);
        this.timer = null;
        this.timer = setInterval(() => {
          this.time = this.showtime(this.nowTime,this.endTime);
        }, 1000);
      });
    },

    /**
     * @description 倒计时方法
     * @param { string }  nowtime
     * @param { string } endtime 
     * @returns 数组
     */
    showtime(nowtime，endtime) {
      //获取当前时间
      let _nowtime = new Date(nowTime + 1000);
      //定义结束时间
      let _endtime = new Date(endtime);
      //距离结束时间的毫秒数
      let difftime = _endtime.getTime() - _nowtime.getTime();
      // console.log("倒计时起止时间", _nowtime, _endtime, "差值", difftime);
      //倒计时为0，更新页面状态
      if (difftime <= 0) {
        difftime = 0;
        this.timeState = "ENDED";
        //this.fetch_getActivityDetails();
      }
      // let d = this.checkTime(Math.floor(difftime / (1000 * 60 * 60 * 24))); //计算天数
      let h = this.checkTime(Math.floor(difftime / (1000 * 60 * 60))); //计算小时数
      let m = this.checkTime(Math.floor((difftime / (1000 * 60)) % 60)); //计算分钟数
      let s = this.checkTime(Math.floor((difftime / 1000) % 60)); //计算秒数
      return [ h, m, s];
    },
	  /**
     * @description 将0-9的数字前面加上0，例1变为01
     * @param { number }  i
     */
    checkTime(i) {
      return i < 10 ? `0${i}`:i
    },
  }

pageShow处理ios跳转外部链接后,回退到本页面原生标题不改变问题

 created() {
    //处理跳转外部链接后，ios回退标题不改变问题
    if (this.$store.state.isIOS) {
      window.addEventListener("pageshow", this.setNav);
    }
  },
  beforeDestroy() {
    if (this.$store.state.isIOS) {
      window.removeEventListener("pageshow", this.setNav);
    }
  },

fastclick解决移动端点击延迟300ms，ios点击穿透失去焦点问题。

fastclick.prototype.focus = function(targetElement) {
    var length

    // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
    if (
        deviceIsIOS &&
        targetElement.setSelectionRange &&
        targetElement.type.indexOf('date') !== 0 &&
        targetElement.type !== 'time' &&
        targetElement.type !== 'month'
    ) {
        length = targetElement.value.length
        targetElement.setSelectionRange(length, length)
    } else {
        targetElement.focus()
    }
    // 新增一行：都获取焦点
    targetElement.focus()
}

ios复制时防止聚焦触发键盘事件

input.readOnly = "readOnly";

@touchmove.prevent 弹窗时，禁止页面滑动

<div
    class="pop pop-login"
    v-show="isPop"
    @touchmove.prevent
    @mousewheel.prevent
  >
  ....弹窗内容
 </div>

ios日期不识别-,不支持YY-MM-DD hh:mm格式,改为/模式

let time = ("2021-11-30 01:09:40").replace(/-/g, "/")

ios系统clic事件失效修复

.elem {
  cursor: pointer;
}

e.target.focus()解决input在 ios手机上点击不易获取焦点的问题

<input 
  class="ipt ipt--imglock" 
  type="text" 
  placeholder="请输入图形验证码" 
  click="getFocus($event)"
  v-model.trim
  name="smsCode" 
  @input="xxx" />
  
 getFocus(e) {
		e.target.focus();
	},

window.scrollTo（）解决微信环境，ios下，键盘收起留白问题

<input 
  class="ipt ipt--imglock" 
  type="text" 
  placeholder="请输入图形验证码" 
  @blur="fixScroll" 
  v-model.trim
  name="smsCode" 
  @input="xxx" />
  
const fixScroll = () => {
  console.log('fixScroll');
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  })
}

对齐下拉选项

select option {
  direction: rtl;
}

禁止动画闪屏

.elem {
 //给动画元素的父元素构造一个3D环境
  perspective: 1000;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

动画不流畅修复,开启GPU硬件加速,避免过度绘制

css3过渡不流畅

.elem {
  transform: translate3d(0, 0, 0);/*GPU硬件加速*/
  /* transform: translateZ(0); */
   will-change: transform;/*避免过度绘制*/
   requestAnimationFrame(animate);/*使用requestAnimationFrame*/
}

禁止旋转时字体调整

* {
  text-size-adjust: 100%;
}

禁止触摸元素出现半透明灰色遮罩

* {
  -webkit-tap-highlight-color: transparent;
}

弹出数字键盘(验证码或纯数字)

<input type="number" pattern="\d*" />(验证码或纯数字)

美化输入框占位

input::-webkit-input-placeholder {
  color: #66f;
}

拨打电话

< a href="te1:021-12345678">

解决ios上下拖动滚动条时的卡顿问题

body {
  -webkit-overflow-scrolling: touch;
  //Android3+和iOS5+支持CSS3的新属性 overflow- scrolling，该属性也可以解决上述问题。
}

css换行\n或单词换行失效,需加:

white-space: pre-wrap; /*\n换行问题*/
word-break: break-all;/*单词换行问题*/

ios多行文本省略失效,可加max-height,overflow:hidden来限制

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
word-break: break-all;
max-height:50px;
overflow:hidden;

移动端禁止input点击高亮,出现半透明灰色背景

-webkit-tap-highlight-color:rgba(0,0,0,0);

input,button去除默认样式

-webkit-appearance: none

ios禁止长按页面弹出菜单,img 和 a 标签都要加

-webkit-touch-callout:none;

发送短信

<a href="sms:10086">发送短信给10086小姐姐</a>

发送邮件

<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

选择照片或拍摄照片

<input type="file" accept="image/*" />

选择视频或拍摄视频

<input type="file" accept="video/*" />

多选文件

<input type="file" multiple />

meta标签

手机自适应

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

IOS中safari允许全屏浏览

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码

<meta content="telephone=no" name="format-detection">

忽略识别email

<meta content="email=no" name="format-detection">

css中的1px并不等于设备的1px

css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。

.elem {
  position: relative;
  width: 200px;
  height: 80px;
  &::after {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid #f66;
    width: 200%;
    height: 200%;
    content: "";
    transform: scale(0.5);
    transform-origin: left top;
  }
}

滚动条样式相关的 CSS 属性

很不幸，现在还没有对这些 CSS 属性的标准化跨浏览器支持。Firefox 和一些基于 Webkit 内核的浏览器（如 Chrome、Edge、Safari）各自提供了不同的属性。

本教程主要针对 Webkit 内核的浏览器，因为它们提供了更多样式属性，不过我也会简单介绍一下 Firefox。

Webkit 滚动条样式属性

::-webkit-scrollbar – 整个滚动条

::-webkit-scrollbar-track – 滚动条的滚动区域（轨道）

::-webkit-scrollbar-thumb – 滚动条的可拖拽部分（滑块）

以下是可用但不常用的属性：

::-webkit-scrollbar-button – 滚动条两端的上/下（或左/右）按钮

::-webkit-scrollbar-track-piece – 滚动条轨道未被滑块覆盖的部分

::-webkit-scrollbar-corner – 垂直滚动条和水平滚动条交汇的部分

Firefox 滚动条样式属性

Firefox中当前可用的两个滚动条样式属性：

scrollbar-width – 控制滚动条的宽度，只有两个可选项：auto 或 thin

scrollbar-color – 接收两个颜色，依次指定滑块和轨道的颜色

posted @ 2023-03-27 11:09 邪儿莫阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

邪儿莫

不一定正确，但在变化！其他博客地址：转《掘金》 https://juejin.cn/user/2497699357140824

移动端等疑难杂症，更新...

touch解决某普通页面要求滑动翻页问题

visibilitychange解决倒计时切换后台停止问题

pageShow处理ios跳转外部链接后,回退到本页面原生标题不改变问题

fastclick解决移动端点击延迟300ms，ios点击穿透失去焦点问题。

ios复制时防止聚焦触发键盘事件

@touchmove.prevent 弹窗时，禁止页面滑动

ios日期不识别-,不支持YY-MM-DD hh:mm格式,改为/模式

ios系统clic事件失效修复

e.target.focus()解决input在 ios手机上点击不易获取焦点的问题

window.scrollTo（）解决微信环境，ios下，键盘收起留白问题

对齐下拉选项

禁止动画闪屏

动画不流畅修复,开启GPU硬件加速,避免过度绘制

禁止旋转时字体调整

禁止触摸元素出现半透明灰色遮罩

弹出数字键盘(验证码或纯数字)

美化输入框占位

拨打电话

解决ios上下拖动滚动条时的卡顿问题

css换行\n或单词换行失效,需加:

ios多行文本省略失效,可加max-height,overflow:hidden来限制

移动端禁止input点击高亮,出现半透明灰色背景

input,button去除默认样式

ios禁止长按页面弹出菜单,img 和 a 标签都要加

发送短信

发送邮件

选择照片或拍摄照片

选择视频或拍摄视频

多选文件

meta标签

css中的1px并不等于设备的1px

滚动条样式相关的 CSS 属性

Webkit 滚动条样式属性

Firefox 滚动条样式属性

公告

邪儿莫

不一定正确，但在变化！ 其他博客地址：转《掘金》 https://juejin.cn/user/2497699357140824

移动端等疑难杂症，更新...

touch解决某普通页面要求滑动翻页问题

visibilitychange解决倒计时切换后台停止问题

pageShow处理ios跳转外部链接后,回退到本页面原生标题不改变问题

fastclick解决移动端点击延迟300ms，ios点击穿透失去焦点问题。

ios复制时防止聚焦触发键盘事件

@touchmove.prevent 弹窗时，禁止页面滑动

ios日期不识别-,不支持YY-MM-DD hh:mm格式,改为/模式

ios系统clic事件失效修复

e.target.focus()解决input在 ios手机上点击不易获取焦点的问题

window.scrollTo（）解决微信环境，ios下，键盘收起留白问题

对齐下拉选项

禁止动画闪屏

动画不流畅修复,开启GPU硬件加速,避免过度绘制

禁止旋转时字体调整

禁止触摸元素出现半透明灰色遮罩

弹出数字键盘(验证码或纯数字)

美化输入框占位

拨打电话

解决ios上下拖动滚动条时的卡顿问题

css换行\n或单词换行失效,需加:

ios多行文本省略失效,可加max-height,overflow:hidden来限制

移动端禁止input点击高亮,出现半透明灰色背景

input,button去除默认样式

ios禁止长按页面弹出菜单,img 和 a 标签都要加

发送短信

发送邮件

选择照片或拍摄照片

选择视频或拍摄视频

多选文件

meta标签

css中的1px并不等于设备的1px

滚动条样式相关的 CSS 属性

Webkit 滚动条样式属性

Firefox 滚动条样式属性

公告

不一定正确，但在变化！其他博客地址：转《掘金》 https://juejin.cn/user/2497699357140824