移動(dòng)端遇到的坑

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;
  }
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末恕稠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子扶欣,更是在濱河造成了極大的恐慌鹅巍,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件料祠,死亡現(xiàn)場(chǎng)離奇詭異骆捧,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)髓绽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門敛苇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人顺呕,你說(shuō)我怎么就攤上這事枫攀。” “怎么了株茶?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵来涨,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我启盛,道長(zhǎng)蹦掐,這世上最難降的妖魔是什么技羔? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮卧抗,結(jié)果婚禮上藤滥,老公的妹妹穿的比我還像新娘。我一直安慰自己颗味,他們只是感情好超陆,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著浦马,像睡著了一般时呀。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晶默,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天谨娜,我揣著相機(jī)與錄音,去河邊找鬼磺陡。 笑死趴梢,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的币他。 我是一名探鬼主播坞靶,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蝴悉!你這毒婦竟也來(lái)了彰阴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拍冠,失蹤者是張志新(化名)和其女友劉穎尿这,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體庆杜,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡射众,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了晃财。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叨橱。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖断盛,靈堂內(nèi)的尸體忽然破棺而出雏逾,到底是詐尸還是另有隱情,我是刑警寧澤郑临,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布栖博,位于F島的核電站,受9級(jí)特大地震影響厢洞,放射性物質(zhì)發(fā)生泄漏仇让。R本人自食惡果不足惜典奉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望丧叽。 院中可真熱鬧卫玖,春花似錦、人聲如沸踊淳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)迂尝。三九已至脱茉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間垄开,已是汗流浹背琴许。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溉躲,地道東北人榜田。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像锻梳,于是被迫代替她去往敵國(guó)和親箭券。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容