H5移动端开发知识总结(一)

==移动开发基本知识点==

一. 使用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等标签背景变暗

在移动端点击后会出现“暗色”的背景，这时候我们需要在css加入如下代码即可：

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

三. meta基础知识点

页面窗口自动调整到设备宽度，并禁止用户缩放

属性基本含义：

属性	含义
width=device-width	控制viewport的大小
device-width	设备的宽度
initial	初始的缩放比例
minimun-scale	允许用户缩放到的最小比例
maximun-scale	允许用户缩放到的最大比例
user-scalable	用户是否可以手动缩放

更多的meta：

四. 移动端如何定义字体font-family

    /* 移动端定义字体font-family */
    body {
      font-family: "Helvetica Neue", Helvetica, sans-serif;
    }

五. 在android或者IOS下拨打电话

打电话给12345678910

六. 发送短信（winphone无效）

发送短信给10010

七. 调用手机系统自带的邮件功能

当用户点击这个链接时，浏览器会自动调用默认的客户端电子邮件客户端，并在收件人框中自动填上收件人的地址：

填写抄送地址

填写抄送地址




填写密件抄送地址

填写密件抄送地址



包含多个收件人、抄送、密件抄送人，用分号(;)隔开即可


包含主题


包含内容
 

包含内容链接

八. 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;
    }