移動web開發

時間 2019-12-05

標籤移動 web 開發欄目無線简体版

原文原文鏈接

移動web開發與pc端的開發仍是有很大的區別的, 雖然移動web可使用一些新的佈局, 如flexbox, 可是由於移動端屏幕尺寸巨多, 而屏幕尺寸又很小, 要充分利用屏幕布局, 所以適配是一個很繁瑣的過程, 針對不一樣的操做系統的特殊處理也比較多, 所以這裏作一個總結.javascript

字體

移動端字體全部系統都不支持微軟雅黑, 中文使用默認的字體便可, 英文使用Helvetica可適配絕大部分機型.css

html, body{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
複製代碼

rem 使用媒體查詢

html{font-size:10px}
  @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
  @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
  @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
  @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
  @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
  @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
  @media screen and (min-width:800px){html{font-size:25px}}
複製代碼

touch事件

touchstart——當手指觸碰屏幕時候發生。無論當前有多少隻手指
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用

TouchEventhtml

touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息

參數信息(changedTouches[0])java

clientX、clientY在顯示區的座標
target：當前元素

click300ms延遲

使用fastclickjs, 或者zeptojs的tap事件, 這算是移動端適配的基本技巧了, 而實際上我在fastclick的README.md中看到下面這段話android

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it. 注意：截至2015年末，大多數移動瀏覽器（尤爲是Chrome和Safari）再也不具備300毫秒的觸摸延遲，所以fastclick對新瀏覽器沒有任何好處，而且可能會在您的應用程序中引入錯誤。仔細考慮您是否真的須要使用它。ios

// fastclick
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script type='application/javascript'>
window.addEventListener('load', function() {
    new FastClick(document.body);
}, false);
</script>
複製代碼

兼容處理

ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
複製代碼

部分android系統中元素被點擊時產生的邊框怎麼去掉

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only;
}
複製代碼

取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />
複製代碼

打電話發短信寫郵件

# 電話
<a href="tel:0755-10086">打電話給:0755-10086</a>

# 短信
<a href="sms:10086">發短信給: 10086</a>

# 郵件
<a href="mailto:xxx@foxmail.com">xxx@foxmail.com</a>
複製代碼

reset.mobile.css

列出個人初始化樣式文件git

@charset "utf-8";

/*禁止文字縮放 字體設置 取消touch高亮效果*/
html{
  min-width:320px;
  max-width:640px;
  margin:0 auto;
  -webkit-text-size-adjust:100%; /*關閉橫屏時字體大小自動調整功能.*/
  background:transparent;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}

body{
  width:100%;
  height:100%;
  -webkit-overflow-scrolling: touch; /*快速滾動和回彈的效果*/
}

article,aside,dialog,footer,header,section,footer,nav,figure,a{
  display:block;
}

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b,
textarea, button, input, select, figure, figcaption, ol, pre, fieldset, legend, blockquote {
  margin:0;
  padding:0;
}

fieldset, img ,button{
  border: none;
  outline:none;
}

/*去除單元格之間的距離*/
table{
  border-collapse:collapse;
  border-spacing:0;
}

/*清除輸入框內陰影*/
input,select,textarea{
  border:none;
  -webkit-appearance:none; /*去除系統默認appearance的樣式,經常使用於IOS下移除原生樣式*/
  appearance:none;
}

/*chrome表單自動填充去掉input黃色背景*/
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-box-shadow:0 0 0px 1000px white inset;
}

ul,ol,dd,dt,dl{
  list-style-type:none;
}

i,em{
  font-style:normal;
}

/*禁止長按頁面彈出菜單（iOS）*/
img,a{
-webkit-touch-callout:none;
}

a,a:active,a:hover{
  text-decoration:none;
}

/*去掉點擊連接和文本框對象時默認的灰色半透明覆蓋層（iOS）或者虛框（Android）*/
a, button, input, textarea, select{
  -webkit-tap-highlight-color:transparent;
  -webkit-border-radius:0;
}
複製代碼