首次寫iPad布局感想（H5）

jhhfft 發(fā)布于2019-08-29 12:38 / 3059人閱讀

摘要：一直做前端工作，卻從來沒有開發(fā)過平板的項(xiàng)目，想來也是有遺憾的，孰知，新公司的第二個(gè)項(xiàng)目就是要適配平板，剛開始是懵的，對(duì)于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容系統(tǒng)就可以。

一直做前端工作，卻從來沒有開發(fā)過平板的項(xiàng)目，想來也是有遺憾的，孰知，新公司的第二個(gè)項(xiàng)目就是要適配平板，剛開始是懵的，對(duì)于兼容，感覺是自己的短板，但慶幸的是這一版只需要兼容iOS系統(tǒng)就可以。

那我現(xiàn)在就說下開發(fā)iOS h5項(xiàng)目可能會(huì)進(jìn)到的誤區(qū)（知道很菜，但是寫出來也是對(duì)自己加深印象）

- ios的專有meta



......列舉常用，其他用時(shí)可百度

不要以為引入對(duì)于禁止屏幕縮放就萬事大吉了，這只針對(duì)于谷歌瀏覽器，要想兼容蘋果自帶的Safari還需要寫入下面這段代碼

    window.onload=function () {
      document.addEventListener("touchstart",function (event) {
        if(event.touches.length>1){
          event.preventDefault();
        }
      })
      var lastTouchEnd=0;
      document.addEventListener("touchend",function (event) {
        var now=(new Date()).getTime();
        if(now-lastTouchEnd<=300){
          event.preventDefault();
        }
        lastTouchEnd=now;
      },false)
    }

- button、input、textarea觸發(fā)時(shí)的灰色背景塊（高亮顯示）
這都是需要我們?nèi)ソ沟模吘挂€原設(shè)計(jì)稿嘛，這是就要加入這幾個(gè)屬性

  -webkit-appearance: none;
  outline: none;
  -webkit-tap-highlight-color: rgb(0, 0, 0, 0);透明度需要為0
  -webkit-user-modify: read-write-plaintext-only;

- 頁面滾動(dòng)效果
如果在需要滾動(dòng)的區(qū)塊內(nèi)添加了overflow: auto;這個(gè)樣式
肯定會(huì)發(fā)現(xiàn)滾動(dòng)的效果不是很流暢，這時(shí)就需要在body上添加一個(gè)樣式overflow-x: hidden; 實(shí)現(xiàn)方式不止一種也可以在滾動(dòng)快上添加webkit-overflow-scrolling: touch;