1.移动端问题

发布于 2022年 03月 01日 23:24

腾讯服务器

88 / 年

  • 上海/北京/广州...
  • 2核 2G 4M
  • Linux/Windows
新年大优惠

腾讯服务器

425 / 年

  • 上海/北京/广州...
  • 4核 8G 10M
  • Linux/Windows
年度最便宜

腾讯服务器

1249 / 年

  • 上海/北京/广州...
  • 8核 16G 14M
  • Linux/Windows
点击查看

1.移动端使用rem 小图片变形

12px*12px 圆形图片,安卓手机显示变形了

img {
 width: 0.24rem;
}
  • 解决

1.使用px

2. border-radius 50% 不圆

  • 解决

1.使用px

3.1px问题

  • 解决:伪元素
::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 0px;
    border-top: 1px solid rgba(0,0,0,0.1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}

::before {
	position: absolute;
	top: 0;
	left: 0;
	border: 1px solid #2f6cfe;
	content: "";
	transform: scale(0.5);
	-webkit-transform: scale(0.5);
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	width: 200%;
	height: 200%;
}

4.多倍屏图片

<img src="mdn-logo-sm.png"
      alt="MDN"
      srcset="mdn-logo-HD.png 2x">
<img src="assets_1x.png"
     srcset="assets_2x.png 2x, assets_3x.png 3x">
     
在支持 srcset 的用户代理中,当使用 'w' 描述符时,src 属性会被忽略。当匹配了媒体条件 (min-width: 600px) 时,图像将宽 200px,否则宽 50vw(视图宽度的50%)。
<img src="clock-demo-thumb-200.png"
      alt="Clock"
      srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
      sizes="(min-width: 600px) 200px, 50vw">

5.点击事件无效

在苹果系统上有些情况下非可点击元素监听click事件可能会无效,针对该情况只需对不触发click事件的元素声明cursor:pointer就能解决。

.elem {
    cursor: pointer;
}

有时候需要设置块级元素

ios曾经使用jQuery时代遇到需要点击2次才能跳转
使用js 添加 click touchend

$('a').on('click touchend', function(e) {
      
});

6.事件穿透

  • 解决
#原生js
e.stopPropagation();

# vue
@click.stop=""

  • 滚动穿透
# vue
@touchmove.prevent

# 小程序
catchtouchmove

7.设置光标后某些手机错位问题

  • 解决
<input ref="numCode" type="text" v-model="cardValue" maxlength="19" placeholder="请输入" class="van-field__control" @input="formatCardNumber" >

formatCardNumber (e) {
    const input = e.target;
    // 获取当前光标的位置
    const cursorIndex = input.selectionStart;
    // 字符串中光标之前空格的个数
    const lineNumOfCursorLeft = (e.target.value.slice(0, cursorIndex).match(/\s/g) || []).length;
    // 去掉所有空格的字符串
    const noLine = e.target.value.replace(/\s/g, '');
    // 去除格式不对的字符并重新插入空格的字符串
    const newCardNum = noLine.replace(/(.{4})/g, '$1 ').replace(/\s$/, '');
    // 改后字符串中原光标之前空格的个数
    const newLineNumOfCursorLeft = (newCardNum.slice(0, cursorIndex).match(/\s/g) || []).length;
    // 光标在改后字符串中应在的位置
    let newCursorIndex = cursorIndex + newLineNumOfCursorLeft - lineNumOfCursorLeft;
    // 赋新值,nextTick保证空格不能手动输入或删除,只能按照规则自动填入
    this.$nextTick(() => {
      this.cardValue = newCardNum;
    // 修正光标位置,保证在渲染新值后定位光标,解决某些手机光标会前移问题,在加空格时候(1234 5),输入5,光标会在5前
    setTimeout(() => {
        input.selectionStart = newCursorIndex;
        input.selectionEnd = newCursorIndex;
        },0)
    },

8.滑动卡顿

  • 解决
-webkit-overflow-scroll: touch;
overflow-scroll: touch

9.安卓 line-height 不居中 问题

  • 解决
 如果写 height: 15px;
       line-height: 15px;
       font-size: 13px;
       
       ios 表现正常居中,android 位置偏了
       
 改为 width: 16px;
      height: 16px;
      line-height: 16px;
     ,android 正常
 
 
 说是 font-size 字数大小不要用奇数
 
 或换用padding
 或换一种布局方式

10.设置文本可编辑

<p contenteditable="true">设置可编辑。</p>

11.flex-wrap不兼容解决方案

前在 `ios 10.2` 以下版本会有问题,不会换行

最后使用 `float` 或者 `display: inline-block` 替代

12.适配 iPhoneX

<meta name="viewport" content="width=device-width, viewport-fit=cover">


padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
注意:constant() 跟 env() 需要同时存在,而且顺序不能换。

13.设置APP内嵌H5标题

document.title = res.result.title || '';
使用 document.title  在iOS中不能监听变化,还需要使用 jsbridge 方法

14.css底部fixed,margin或padding-bottom不起作用

由于设置:iPhoneX适配加了
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

css 函数 env() 和 constant():
上面两个函数可以直接使用变量函数,只有在 webkit 内核下才支持
env() 必须在 ios >= 11.2 才支持
constant() 必须 ios < 11.2 支持

网页中padding-bottom不起作用;

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
viewport-fit:
        contain: 可视化窗口完全包含网页内容
        cover: 网页内容完全覆盖
        auto: 默认值和 contain 一样
        
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 
}

15.wx.chooseImage出现permission denied

wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      console.log('wxres:', res);
    },
    fail: (err) => {
      console.log('wx:error', err);
    }
});



判定返回fail就直接刷新

16.html2canvas在IOS13 无法截图

  html2canvas 版本降低为【1.0.0-rc.4】

17. 微信小程序 web-view 拍照会刷新页面

微信调起拍照的时候,页面会触发onShow生命周期,很多人将方法放到onShow里就会导致出现页面刷新等问题,

将web-view的入口放到onLoad的即可解决

18. new Date(“2018-12-12 00:00:01”).getTime()获取时间戳的时候在ios下面为NaN.

new Date(data.replace(/-/g,'/')).getTime()

19. ios系统history.back()返回却不刷新页面,安卓会重新刷新

(function () {
    var isPageHide = false;
    window.addEventListener('pageshow', function () {
        if (isPageHide) {
            window.location.reload();
        }
    });
    window.addEventListener('pagehide', function () {
        isPageHide = true;
    });
})();

20.小程序中pdf预览

第一种:用微信自带的方法 wx.downloadFile({ }) + wx.openDocument({ })
第二种:使用 web-view,uni-app 中 web-view 可以直接加载 pdf 文件
第三种:可以使用pdf.js 来实现

微信原生方法: 安卓好用, ios 不好用
web-view: 安卓不好用,ios 好用

21.iOS 返回问题,安卓

问题:
A 页面跳转 B页面, B页面跳转 C页面,C页面 返回直接到了A页面

href 跳转,B页面用过一次 replace,用过刷新

正常流程:
A 页面跳转 B页面, B页面跳转 C页面,C页面 返回B页面,刷新,切换的tab参数是最后一次


// 刷新页面,ios中会监听到,安卓不会监听
(function() {
  let isPageHide = false;
  window.addEventListener('pageshow', function() {
    if (isPageHide) {
      Lib.device.android ? '' : window.location.reload;
    }
  });
  window.addEventListener('pagehide', function() {
    isPageHide = true;
  });
})();


// a.html 设置刷新 检测缓存是否有标志 要是有就说明数据有变化  a.html跳转到b.html页面
window.addEventListener("pageshow", function(){
    if(sessionStorage.getItem("need-refresh")){
        location.reload();
        sessionStorage.removeItem("need-refresh");
    }
});

// b.html 如果是数据变化了就写一条缓存   b.html返回到a.html页面
sessionStorage.setItem("need-refresh", true);

- https://juejin.cn/post/6844904002103033870
- https://stackoverflow.com/questions/17432899/javascript-bfcache-pageshow-event-event-persisted-always-set-to-false

- // 刷新当前页面
window.location.Reload();
self.location.reload();
window.location.href = window.location.href;

- 移动端 location.href 无法成功跳转页面
最近做的移动端页面在请求成功后要跳转页面,通过location.href实现的跳转。但同事在测试时,安卓机可以成功跳转,苹果IOS却无法成功跳转。
 
解决办法:在链接后面加一个随机参数,这样就可以跳转了
 
document.location.href = 'doctor_step4.html?timestamp=' + Math.random();


- meta 标签设置强制不缓存

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">


- document.referrer

22.uniapp 开发小程序scroll-view滚动条

<style> 中不能加 scoped
::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent
}
scroll-view::-webkit-scrollbar {
  display: none;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent
}

23.小程序中 onPageScroll 卡顿

遇到一个需求,在页面进行滚动操作的时候,当页面其中的某个元素滚动到某个位置,我们就让该元素固定顶部位置。等到滚动小于某个值的时候,再让该元素继续随着页面滚动。这就是我们平时说的吸顶效果。

uniapp中

onPageScroll : function(e) { //nvue暂不支持滚动监听,可用bindingx代替
  // console.log("滚动距离为:" + e.scrollTop);
  // 判断滚动距离和元素距离顶部距离
},

uni
  .createSelectorQuery()
  .in(this)
  .select("#wiki")
  .boundingClientRect((data) => {
    console.log('顶部距离:',data.top)
  })
  .exec();

推荐文章