经常在H5移动端开发遇到的东西

1、弹出数字键盘

• 有"#" 、"*"符号输入

<input type="tel">

• 纯数字

<input pattern="\d">

2、调用系统的某些功能

• 拨号

<a href="tel:10010">打电话给10010</a>

• 发送短信

<a href="sms:10010">发送短信给10010</a>

• 发送邮件

<a href="mailto:2727617776@qq.com">发送邮件给2727617776</a>

• 选择照片或者拍摄照片

<input type="file" accept="image/*">

• 选择视频或拍摄视频

<input type="file" accept="video/*">

• 多选

<input type="text" multiple>

3、打开原生应用

• 打开微信

<a href="weixin://">打开微信</a>

• 打开支付宝

<a href="alipays://">打开支付宝</a>

• 打开支付宝扫一扫功能

<a href="alipays://platformapi/startapp?said=10000007">打开支付宝扫一扫功能</a>

• 打开支付宝的蚂蚁森林

<a href="alipays://platformapi/startapp?appid=60000002">打开支付宝扫一扫功能</a>

4、忽略自动识别

• 忽略浏览器自动识别数字为电话号码

<meta name="format-detection" content="telephone=no">

• 忽略浏览器自动识别邮箱账号

<meta name="format-detection" content="email=no">

5、屏幕旋转为横屏时，字体大小会变

*{
	-webkit-text-size-adjust: 100%;
}

6、

1. 使用nth-child()选择 指定元素
   通过nth-child()筛选指定的元素设置 样式
2. 使用writing-mode排版竖文
   通过writing-mode调整文本排版方向 竖形文字 文言文 诗词
3. 使用text-align-last 对齐两端文本
   通过text-align-last:justify 设置文本两端对齐
4. 使用not()去除无用属性
   通过not()排除指定元素不使用设置样式
   场景：符号分隔文字，边界排版
5. 使用object-fit规定图像尺寸
   通过object-fit使用图像脱离background-size的约束，使用标记图像背景尺寸
   场景：图片尺寸自适应
6. 使用overflow-x排版横向列表
   通过flex-box或inline-block的形式横向排列元素，对父元素设置overflow-x：auto 横向滚动查看
7. 使用transform描绘1px边框
   分辨率比较低的屏幕显示1px的边框会显得模糊，通过::before或者::after和transform模拟 细腻的1px边框。
8. 使用tansfrom翻转内容
   通过transfrom:scale3d()对内容进行翻转，水平翻转，垂直翻转
9. 使用letter-spacing排版倒叙文本
   通过letter-spacing设置负值字体间距将文本倒叙