1 h5頁(yè)面嵌入到app里面需要通信
2 如果有滾動(dòng)ios會(huì)連帶著body一塊滾動(dòng) 解決辦法 使用inobounce.js解決
3 click事件 點(diǎn)擊延遲 解決辦法 使用clickfast.js
4 如果出現(xiàn)手機(jī)渲染問(wèn)題 可以加入這幾個(gè)屬性依次試一下
transform:translate3d(0,0,0) //css3動(dòng)畫渲染加速
backface-visibility: hidden; //隱藏動(dòng)畫
transform:scale(1.000000001); //擴(kuò)大
transform:scale(0.999999999); //縮小
5 陰影問(wèn)題
可以給不規(guī)則圖形加陰影
filter: drop-shadow(0 0 1.33vw rgba(0, 0, 0, 0.5))
只能給規(guī)則圖形加陰影
box-shadow ...
6 ios手機(jī)回彈問(wèn)題 -webkit-overflow-scrolling: touch
這個(gè)屬性遇到滑動(dòng) 搜索框顯示與隱藏 會(huì)很扯淡 加載更多 加載到底部 和頂部會(huì)有回彈效果 搜索框就會(huì)顯示 解決的辦法是 監(jiān)聽滾動(dòng)條 監(jiān)聽touch事件 判斷滾動(dòng)和觸摸的方向 監(jiān)聽 觸摸速度 但是偶爾還會(huì)出現(xiàn)
直接上代碼
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()
// 滾動(dòng)條的距離
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() //初始時(shí)間
console.log(startMoveTime + ":開始時(shí)間")
});
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(); //最后時(shí)間
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動(dòng)態(tài)添加的時(shí)候盡量不要使用js操作dom
8 上拉加載更多用的是mint ui 可以在github上查看 但是不太順暢 好像還有適配問(wèn)題 之后又用了 無(wú)限加載更多這個(gè)組件 這個(gè)組件也會(huì)有問(wèn)題 如果keep-alive 緩存 會(huì)一直加載 而且滾動(dòng)條的位置無(wú)法緩存 之后緩存的這個(gè)方案就擱淺了
9 手機(jī)端尺寸 寬高 都用vw 1-2px還用px 否則有些手機(jī)會(huì)不顯示
10 解決安卓手機(jī)圓角失效問(wèn)題
border-radius: 2px;
background-clip: padding-box;
11 解決ios input 默認(rèn)圓角邊框問(wèn)題 border-radius: 0;
12 android軟鍵盤彈出 會(huì)壓縮布局問(wèn)題 給被壓縮的容器設(shè)置一個(gè)最小高度min-height
13 在能使用基本布局的情況下 不要使用flex布局 這樣會(huì)造成一些無(wú)法預(yù)知的情況
比如 下面有一個(gè)按鈕需要固定在底部 中間又有input輸入框 如果用了flex:1 當(dāng)軟鍵盤彈起的時(shí)候 中間的布局可能壓縮 這個(gè)時(shí)候把上面的布局用 智能計(jì)算高度
min-height: calc(100% - 13.06667vw); 減去的是按鈕的高度
14 android上面line-height不居中問(wèn)題
原因 1.字體大小不要使用奇數(shù)字號(hào)番枚,帶小數(shù)點(diǎn)的更不要提了讯蒲。也就是說(shuō)被2整除的整數(shù)且不可小于12px什乙。
本質(zhì)原因:
是Android在排版計(jì)算的時(shí)候參考了primyfont字體的相關(guān)屬性(即HHead Ascent、HHead Descent等)雹熬,而primyfont的查找是看font-family
里哪個(gè)字體在fonts.xml里第一個(gè)匹配上,而原生Android下中文字體是沒(méi)有family name的谣膳,導(dǎo)致匹配上的始終不是中文字體竿报,所以解決這個(gè)問(wèn)題就要在font-family
里顯式申明中文,或者通過(guò)什么方法保證所有字符都fallback到中文字體参歹。
15:
calc() = calc(四則運(yùn)算)
用于動(dòng)態(tài)計(jì)算長(zhǎng)度值仰楚。
需要注意的是,運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% - 10px)僧界;
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算侨嘀;
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則捂襟;
2.使用rem的單位時(shí)造成(根元素如果動(dòng)態(tài)改變時(shí)咬腕,根元素字體可能不是整數(shù))。
處理辦法
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 移動(dòng)端input輸入placeholder垂直不居中問(wèn)題
在移動(dòng)端編寫input輸入框時(shí)候涨共,為了輸入文字與輸入框垂直居中,一般情況下宠漩,會(huì)將input的line-height的高度等于height举反。但在移動(dòng)端輸入的時(shí)候會(huì)發(fā)現(xiàn),雖然輸入內(nèi)容確實(shí)是垂直居中了扒吁,但是光標(biāo)的位置是靠上的火鼻,導(dǎo)致感官上的不美觀。于是對(duì)input設(shè)置的時(shí)候雕崩,首先確定字體的大小如font-size:16px魁索,其次我們確定設(shè)計(jì)稿里input的高度,如input高度為40px盼铁,那么此時(shí)的代碼應(yīng)該是這樣的:input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;}粗蔚,這樣的代碼在移動(dòng)端無(wú)論是視覺(jué)還是輸入時(shí)都是符合要求的∪幕穑可是html5出來(lái)一個(gè)新屬性鹏控,那就是placeholder,不得不說(shuō)這個(gè)屬性的出現(xiàn)解救了以往繁瑣的js實(shí)現(xiàn)效果趁窃,但是牧挣,當(dāng)你給input設(shè)置了placeholder后,在pc端看醒陆,好像是偏上了那么一點(diǎn)點(diǎn)瀑构,好像也不是很影響使用。但是在手機(jī)端瀏覽后刨摩,就會(huì)發(fā)現(xiàn)雖然輸入文字可以垂直居中寺晌,placeholder里的內(nèi)容明顯的靠上,嚴(yán)重的不美觀澡刹。
在網(wǎng)上查了一些資料呻征,對(duì)于原理性的解釋好像基本上沒(méi)看到。但是國(guó)外的網(wǎng)站對(duì)這個(gè)屬性給了一個(gè)默認(rèn)的建議罢浇,那就是不要設(shè)計(jì)input的line-height或者設(shè)置line-height為normal陆赋,即可沐祷。
不過(guò),又發(fā)現(xiàn)問(wèn)題了攒岛,雖然在手機(jī)端正常赖临,但是在pc端看的時(shí)候,placeholder還是有點(diǎn)偏下的感覺(jué)灾锯。強(qiáng)迫癥害死人啊兢榨。。顺饮。那怎么辦吵聪。。兼雄。設(shè)置line-height:1.5em吟逝,或者將em換算成實(shí)際的px也可以。
17 H5微信開發(fā)iOS 6.4.7真機(jī)上input調(diào)起軟鍵盤后不回彈的解決方案
問(wèn)題描述:input輸入在iOS的微信中調(diào)起軟鍵盤之后赦肋,輸入完成收起軟鍵盤的時(shí)候頁(yè)面下方(原來(lái)軟鍵盤的位置)有空白澎办,這將導(dǎo)致下方fixed定位按鈕失效等問(wèn)題,解決方案:通過(guò)給input添加失去焦點(diǎn)事件金砍,觸發(fā)該事件的時(shí)候使頁(yè)面自動(dòng)滑動(dòng)到頂部,親測(cè)有效麦锯,代碼如下:
$("input").blur(function(){
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 300);
})
18 關(guān)于移動(dòng)端屏幕適配 使用vw單位 但是在pc端比例會(huì)比較大 建議在屏幕寬度比較大的情況下加上媒體查詢 例如
@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;
}
}