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; } 相关链接 H5移动端开发知识总结(一) H5移动端开发知识总结(二) H5移动端开发知识总结(三)

本文章由javascript技术分享原创和收集