==移動開發(fā)基本知識點==

一. 使用rem作為單位

        html {
            font-size: 100px;
        }

        @media (min-width: 320px) {
            html {
                font-size: 100px;
            }
        }

        @media (min-width: 360px) {
            html {
                font-size: 112.5px;
            }
        }

        @media (min-width: 400px) {
            html {
                font-size: 125px;
            }
        }

        @media (min-width: 640px) {
            html {
                font-size: 200px;
            }
        }

給手機設置100px的字體大小，對于320px，其他手機都是等比例匹配妹懒；因此設計稿上是多少像素的話，那么轉化為rem的時候双吆，rem/100即可眨唬；

二. 禁用a,button,input,select,textarea等標簽背景變暗

在移動端點擊后會出現(xiàn)“暗色”的背景，這時候我們需要在css加入如下代碼即可：

        a, button, input, optgroup, select, textarea {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

三. meta基礎知識點

頁面窗口自動調整到設備寬度好乐，并禁止用戶縮放

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no">

屬性基本含義：

更多的meta：

  <!-- 編碼格式 -->
  <meta charset="UTF-8">

  <!-- 頁面窗口自動調整到設備寬度匾竿，并禁止用戶縮放頁面 -->
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

  <!-- 忽略將頁面中的數字識別為電話號碼 -->
  <meta name="format-detection" content="telephone=no">

  <!-- 忽略 android 平臺對郵箱的識別 -->
  <meta name="format-detection" content="email=no">

  <!-- 當網站添加到主屏幕快速啟動方式，可隱藏地址欄蔚万，進針對ios的safari-->
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!-- 將網站添加到主屏幕快速啟動方式岭妖，僅針對ios的safari頂端狀態(tài)條的樣式 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <!-- 可選default、black反璃、black-translucent -->


  <!-- 需要在網站的根目錄下存放favicon圖標昵慌，防止404請求 -->
  <link rel="shortcut icon" href="/favicon.ico">

四. 移動端如何定義字體font-family

    /* 移動端定義字體font-family */
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
    }

五. 在android或者IOS下?lián)艽螂娫?/h5>

<!-- 在ios或者android下?lián)艽螂娫?-->
<a href="tel:12345678910">打電話給12345678910</a>

六. 發(fā)送短信（winphone無效）

<!-- 發(fā)送短信（winphone系統(tǒng)無效）-->
<a href="sms:10010">發(fā)送短信給10010</a>

七. 調用手機系統(tǒng)自帶的郵件功能

當用戶點擊這個鏈接時，瀏覽器會自動調用默認的客戶端電子郵件客戶端淮蜈，并在收件人框中自動填上收件人的地址：

<!-- 填寫抄送地址：-->
<!-- ios要用cc=開頭-->
<a href="mailto:zhoujin0606@qq.com?cc=xxxxx@qq.com">填寫抄送地址</a>
<!-- android如下 -->
<a href="mailto:zhoujin0606@qq.com?xxxxx@qq.com">填寫抄送地址</a>


<!-- 填寫密件地址：-->
<!-- ios緊跟抄送地址之后斋攀，用&bcc=填上密件抄送地址 -->
<a href="mailto:zhoujin0606@qq.com?cc=xxxxx@qq.com&bcc=xxxxx@qq.com">填寫密件抄送地址</a>
<!-- android如下 -->
<a href="mailto:zhoujin0606@qq.com?xxxxx@qq.com?xxxxx@qq.com">填寫密件抄送地址</a>


<!-- 包含多個收件人、抄送梧田、密件抄送人淳蔼，用分號(;)隔開即可-->
<a href="mailto:zhoujin0606@qq.com;zhoujin0606@qq.com;zhoujin0606@qq.com">包含多個收件人、抄送裁眯、密件抄送人鹉梨，用分號(;)隔開即可</a>

<!-- 包含主題，用?subject= 可以填上主題 -->
<a href="mailto:zhoujin0606@qq.com?subject=【邀請函】">包含主題</a>

<!-- 包含內容 用?body-->
<a href="mailto:zhoujin0606@qq.com?body=內容">包含內容</a>
 
<!-- 內容包含鏈接 -->
<a href="mailto:zhoujin0606@qq.com?body=http://aizhoujin.top">包含內容鏈接</a>

八. webkit表單輸入框placeholder的顏色值改變

修改默認的顏色:

    input::-webkit-input-placeholder{
      color: red;
    }

修改用戶操作操作時的顏色

    input:focus::-webkit-input-placeholder{
      color: blue;
    }

九. 移動端IOS手機下清楚輸入框的內陰影

    input,textarea{
      -webkit-appearance: none;
    }

十. 在IOS中禁止長按鏈接與圖片的彈出菜單

    a,img{
      -webkit-touch-callout: none;
    }

相關鏈接

H5移動端開發(fā)知識總結(一)

H5移動端開發(fā)知識總結(二)

H5移動端開發(fā)知識總結(三)