移动端原生H5开发心得和干货

配置项1.Viewport不设置的话，相当于用手机访问PC端页面一样，无初始缩放和页面宽度2.Apple设备使用WebApp模式（一般用于SPA应用，因为如果在里面点击还是跳转其他链接的话，还是会从Safari打开的）

在Safari浏览器点击分享按钮-添加到主屏幕，然后在桌面打开3.强制浏览器全屏(UC/QQ)

某些浏览器识别成功之后会将号码或者邮箱转换成a标签5.WindowsPhone点击无阴影

类似于css的-webkit-tap-highlight:transparent6.清除浏览器缓存

2.取消Input在Apple设备中，英文首字母默认大写

3.:active伪类失效

让Android或者Ios开发者提供一个App协议给你就可以了，让人尴尬的是，我们不知道用户到底有没有安装此App应用，所以需要Javascript来配合，当用户已安装直接跳转到App，没有安装跳到下载地址，详情在本文中的Javascript项5.软键盘弹出数字键盘(用户只能输入数字)

样式项1.去除某些区域点击的时候会出现阴影2.禁止用户长按选中、复制文本

3.禁止用户长按出现菜单栏

4.流畅滚动（一般用于overflow:scroll之后出现滚动不流畅的情况）

5.改变输入框placeholder的颜色值

6.修改表单元素的默认样式

checkbox也可以写成switch组件，点击查看switch组件7.多行文本超出显示省略号

8.css3启用硬件加速写transition、animation时，请用transform代替left、top等属性，从而使动画更流畅

9.解决transition闪屏

10.旋转屏幕时字体大小不改变

11.某些Android机圆角失效

12.select下拉选择设置右对齐

13.部分机型input的type为search时，自带close按钮的样式修改方案14.使用rem单位

1rem=1*根元素的font-size值，因此这里的bodyfont-size为14px，以后要修改font-size，直接修改根元素的就行啦，牵一发而动全身15.自定义滚动条样式

::-webkit-scrollbar修改浏览器滚动条样式，div::-webkit-scrollbar修改某个节点的滚动条样式16.Android上去掉语音输入按钮17.监听屏幕旋转事件并且处理样式

18.Flexbox兼容写法这里列出了几个经常使用的属性，一般情况下够用

这里列出了几个经常使用的属性，一般情况下够用19.高度Auto如何全屏居中html

css

fixed+flexbox布局，一般用于对话框20.左边固定宽度，右边自适应html

flex布局，以前用float+margin21.按钮点击的样式

22.Scroll-Xhtml

Javascript项1.唤醒App，唤醒失败则跳转到下载地址

2.浏览器滚动到底部，加载数据

offset为偏移量，距离底部还有多少时执行回调3.获取设备类型

isQQ返回是否是手机QQ内置浏览器，而不是QQ浏览器4.监听页面可见性变化