移动端原生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.监听页面可见性变化

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180716A0QOLP00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券