1.移动端问题
发布于 2022年 03月 01日 23:24
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();