1 h5页面嵌入到app里面需要通信
2 如果有滚动ios会连带着body一块滚动 解决办法 使用inobounce.js解决
3 click事件 点击延迟 解决办法 使用clickfast.js
4 如果出现手机渲染问题 可以加入这几个属性依次试一下
transform:translate3d(0,0,0) //css3动画渲染加速
backface-visibility: hidden; //隐藏动画
transform:scale(1.000000001); //扩大
transform:scale(0.999999999); //缩小
5 阴影问题
可以给不规则图形加阴影
filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5))
只能给规则图形加阴影
box-shadow ...
6 ios手机回弹问题 -webkit-overflow-scrolling: touch
这个属性遇到滑动 搜索框显示与隐藏 会很扯淡 加载更多 加载到底部 和顶部会有回弹效果 搜索框就会显示 解决的办法是 监听滚动条 监听touch事件 判断滚动和触摸的方向 监听 触摸速度 但是偶尔还会出现
直接上代码
public_border() {
let tabControl = document.getElementById('tab-control')
if (this.$refs.content.$el.clientHeight < document.body.clientHeight - (getCoupon.clientHeight + tabControl.clientHeight)) { return }
if (this.$refs.content.couponType !== 1) { return }
},
input_show_hide() {
let getCoupon = document.getElementById("getCoupon");
let scrollcontent = document.getElementById("scroll-content");
let couponblock = document.querySelectorAll('.coupon-block')
var startX, startY, moveEndX, moveEndY, X, Y,
startMoveTime = 0,
lastMoveTime = 0;
let last_scroll_position, new_scroll_position = 0;
scrollcontent.addEventListener("scroll", e => {
this.public_border()
// 滚动条的距离
last_scroll_position = scrollcontent.scrollTop; //10
if (new_scroll_position < last_scroll_position && last_scroll_position > getCoupon.clientHeight) {
// 隐藏
getCoupon.classList.remove("slideDown");
getCoupon.classList.add("slideUp");
} else if (new_scroll_position >= last_scroll_position && last_scroll_position <= getCoupon.clientHeight) {
getCoupon.classList.remove("slideUp");
getCoupon.classList.add("slideDown");
return
}
new_scroll_position = last_scroll_position; //10
});
scrollcontent.addEventListener("touchstart", e => {
if (this.$refs.content.couponType !== 1) {
return
}
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
startMoveTime = e.timeStamp || Data.now() //初始时间
console.log(startMoveTime + "：开始时间")
});
scrollcontent.addEventListener("touchmove", e => {
this.public_border()
moveEndX = e.changedTouches[0].pageX;
moveEndY = e.changedTouches[0].pageY;
X = moveEndX - startX;
Y = moveEndY - startY;
lastMoveTime = e.timeStamp || Data.now(); //最后时间
let moveSpeed = Math.abs(Y) / (lastMoveTime - startMoveTime);
console.log(moveSpeed + "：速度")
console.log(scrollcontent.scrollTop)
// 向下拉 触摸
if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y > 0) {
getCoupon.classList.remove("slideUp");
getCoupon.classList.add("slideDown");
}
// up
else if (Math.abs(Y) > Math.abs(X) && moveSpeed > 0.5 && Y < 0) {
getCoupon.classList.remove("slideDown");
getCoupon.classList.add("slideUp");
}
});
7 class动态添加的时候尽量不要使用js操作dom
8 上拉加载更多用的是mint ui 可以在github上查看 但是不太顺畅 好像还有适配问题 之后又用了 无限加载更多这个组件 这个组件也会有问题 如果keep-alive 缓存 会一直加载 而且滚动条的位置无法缓存 之后缓存的这个方案就搁浅了
9 手机端尺寸 宽高 都用vw 1-2px还用px 否则有些手机会不显示
10 解决安卓手机圆角失效问题
border-radius: 2px;
background-clip: padding-box;
11 解决ios input 默认圆角边框问题 border-radius: 0;
12 android软键盘弹出 会压缩布局问题 给被压缩的容器设置一个最小高度min-height
13 在能使用基本布局的情况下 不要使用flex布局 这样会造成一些无法预知的情况
比如 下面有一个按钮需要固定在底部 中间又有input输入框 如果用了flex:1 当软键盘弹起的时候 中间的布局可能压缩 这个时候把上面的布局用 智能计算高度
min-height: calc(100% - 13.06667vw); 减去的是按钮的高度
14 android上面line-height不居中问题
原因 1.字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
本质原因：
是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在font-family里显式申明中文，或者通过什么方法保证所有字符都fallback到中文字体。
15：
calc() = calc(四则运算)
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则；
2.使用rem的单位时造成（根元素如果动态改变时，根元素字体可能不是整数）。
处理办法
table布局 在元素外再包一层，使用表格布局
<div class="container"><span class="content">Jason's Word</span> </div>
.container {display: table;}
.content {
background-color: gray;
font-size: 10px;
display: table-cell;
vertical-align: middle;
}
16 移动端input输入placeholder垂直不居中问题
在移动端编写input输入框时候，为了输入文字与输入框垂直居中，一般情况下，会将input的line-height的高度等于height。但在移动端输入的时候会发现，虽然输入内容确实是垂直居中了，但是光标的位置是靠上的，导致感官上的不美观。于是对input设置的时候，首先确定字体的大小如font-size:16px，其次我们确定设计稿里input的高度，如input高度为40px，那么此时的代码应该是这样的：input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;}，这样的代码在移动端无论是视觉还是输入时都是符合要求的。可是html5出来一个新属性，那就是placeholder，不得不说这个属性的出现解救了以往繁琐的js实现效果，但是，当你给input设置了placeholder后，在pc端看，好像是偏上了那么一点点，好像也不是很影响使用。但是在手机端浏览后，就会发现虽然输入文字可以垂直居中，placeholder里的内容明显的靠上，严重的不美观。
在网上查了一些资料，对于原理性的解释好像基本上没看到。但是国外的网站对这个属性给了一个默认的建议，那就是不要设计input的line-height或者设置line-height为normal，即可。
不过，又发现问题了，虽然在手机端正常，但是在pc端看的时候，placeholder还是有点偏下的感觉。强迫症害死人啊。。。那怎么办。。。设置line-height：1.5em，或者将em换算成实际的px也可以。
17 H5微信开发iOS 6.4.7真机上input调起软键盘后不回弹的解决方案
问题描述：input输入在iOS的微信中调起软键盘之后，输入完成收起软键盘的时候页面下方（原来软键盘的位置）有空白，这将导致下方fixed定位按钮失效等问题，解决方案：通过给input添加失去焦点事件，触发该事件的时候使页面自动滑动到顶部，亲测有效，代码如下：
$("input").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 300);
})
18 关于移动端屏幕适配 使用vw单位 但是在pc端比例会比较大 建议在屏幕宽度比较大的情况下加上媒体查询 例如
@media screen and (min-width: 500px) {
body {
max-width: 500px;
margin: auto;
position: relative;
}
.wrapper {
position: relative;
height: 850px;
}
.wrapper form {
height: 230px;
box-shadow: 0 2.5px 17.5px 0 rgba(0, 0, 0, 0.19);
padding: 15px;
}
.wrapper form .form-title {
font-size: 22px;
}
.wrapper form input {
font-size: 23px;
margin-top: 10px;
border-radius: 3px;
height: 65px;
line-height: 22.5px;
padding-left: 15px;
text-align: center;
}
.wrapper form button {
margin-top: 5px;
}
.button {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
margin-top: 20px;
height: 65px;
font-size: 23px;
}
.wrapper .rules-link {
font-size: 20px;
}
.close-btn {
width: 35px;
height: 35px;
}
.wrapper .top-container .logo {
margin-top: 10px;
margin-left: 15px;
}
.rules {
max-width: 500px;
height: 850px;
}
.rules .rules-container {
width: 385px;
}
.rules h3 {
font-size: 24px;
padding: 25px 0;
}
.rules ul li {
margin-bottom: 5px;
}
.close-btn::before,
.close-btn::after {
width: 35px;
}
.wrapper .rules-link {
line-height: 60px;
}
.success-page img {
padding: 50px 40px;
}
.wrapper form .tip{
font-size: 12px;
}
}
网友评论