== 移动开发基本知识点 ==
一. 使用 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 移动端开发知识总结(三)
来源: http://www.jianshu.com/p/18cece945197