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

傷城~ 2023-03-13 05:17 16阅读 0赞

## 1、弹出数字键盘 ##

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

*  纯数字

## 2、调用系统的某些功能 ##

*  拨号

*  发送短信

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

*  发送邮件

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

*  选择照片或者拍摄照片

*  选择视频或拍摄视频

*  多选

## 3、打开原生应用 ##

*  打开微信

*  打开支付宝

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

*  打开支付宝扫一扫功能

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

*  打开支付宝的蚂蚁森林

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

## 4、忽略自动识别 ##

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

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

## 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设置负值字体间距将文本倒叙