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基础知识点

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

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

属性基本含义：

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

更多的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顶端状态条的样式 -->
  <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下拨打电话

<!-- 在ios或者android下拨打电话 -->
<a href="tel:12345678910">打电话给12345678910</a>

六. 发送短信（winphone无效）

<!-- 发送短信（winphone系统无效）-->
<a href="sms:10010">发送短信给10010</a>

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

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

<!-- 填写抄送地址：-->
<!-- 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移动端开发知识总结(一)

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

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