热门关键字:
jquery > jquery教程 > jquery教程 > 中高级前端必须注意的40条移动端H5坑位指南

中高级前端必须注意的40条移动端H5坑位指南

400
作者:管理员
发布时间:2021/4/24 17:44:18
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4562
  调用系统功能


  使用能快速调用移动设备的三大通讯功能,使用能快速调用移动设备的的。


  这些功能方便了页面与系统的交互,关键在于调用格式一定要准确,否则会被忽略。


  忽略自动识别


  有些会自动将数字字母符号识别为并将其渲染成上述调用系统功能里的。虽然很方便却有可能违背需求。


  弹出数字键盘


  使用弹起数字键盘会带上和,适合输入电话。推荐使用弹起数字键盘,适合输入验证码等纯数字格式。


  唤醒原生应用


  通过与原生应用建立通讯渠道,这种页面与客户端的通讯方式称为URL Scheme,其基本格式为,笔者曾经发表过《H5与App的通讯方式》讲述的使用。


  scheme:应用标识,表示应用在系统里的唯一标识path:应用行为,表示应用某个页面或功能query:应用参数,表示应用页面或应用功能所需的条件参数


  一般由前端与客户端共同协商。唤醒原生应用的前提是必须在移动设备里安装了该应用,有些即使安装了该应用也无法唤醒原生应用,因为它认为是一种潜在的危险行为而禁用它,像和。还好可开启白名单让有效。


  若在页面引用第三方原生应用的,可通过抓包第三方原生应用获取其。


  禁止页面缩放


  在智能手机的普及下,很多网站都具备和两种浏览版本,因此无需双击缩放查看页面。禁止页面缩放可保障能无遗漏地展现页面所有布局。


  禁止页面缓存


  Cache-Control指定请求和响应遵循的缓存机制,不想使用浏览器缓存就禁止呗!


  禁止字母大写


  有时在输入框里输入文本会默认开启首字母大写纠正,就是输入首字母小写会被自动纠正成大写,特么的烦。直接声明关闭首字母大写功能和关闭纠正功能。


  针对Safari配置


  贴一些较零散且少用的配置。


  针对其他浏览器配置


  贴一些其他浏览器较零散且少用的配置,主要是常用的、和。从网易MTL的测试数据得知,新版的和已不支持以下声明了。


  让:active有效,让:hover无效


  有些元素的可能会无效,而元素的在点击后会一直处于点击状态,需点击其他位置才能解除点击状态。给注册一个空的可将两种状态反转。


  自动适应布局


  针对移动端,笔者通常会结合JS依据与的比例动态声明的,以为长度单位声明所有节点的几何属性,这样就能做到大部分移动设备的页面兼容,兼容出入较大的地方再通过做特别处理。


  笔者通常将设置成,即在设计图上长度在CSS代码上使用表示。


  当然还可依据与的比例使用动态声明的,这样就能节省上述代码。不对,是完全代替上述代码。


  若以分辨率为移动端和桌面端的断点,还可结合做断点处理。以下使用,否则不使用。


  自动适应背景


  使用声明一个元素背景,多数情况会将声明为。可能在设计图对应分辨率的移动设备下,背景会完美贴合显示,但换到其他分辨率的移动设备下就会出现左右空出到的空隙。


  此时将声明为,跟随和的变化而变化。反正和都是量好的实际尺寸。


  监听屏幕旋转


  你还在使用JS判断横屏竖屏调整样式吗?那就真的了。


  支持弹性滚动


  在苹果系统上非元素的滚动操作可能会存在卡顿,但安卓系统不会出现该情况。通过声明调用系统原生滚动事件优化,增加页面滚动的流畅度。


  禁止滚动传播


  与不一样,有一个奇怪行为。当页面包含多个滚动区域时,滚完一个区域后若还存在滚动动量则会将这些剩余动量传播到下一个滚动区域,造成该区域也滚动起来。这种行为称为滚动传播。


  若不想产生这种奇怪行为可直接禁止。


  禁止屏幕抖动


  对于一些突然出现滚动条的页面,可能会产生左右抖动的不良影响。在一个滚动容器里,打开弹窗就隐藏滚动条,关闭弹窗就显示滚动条,来回操作会让屏幕抖动起来。提前声明滚动容器的为滚动条宽度,就能有效消除这个不良影响。


  每个的滚动条宽度都有可能不一致,甚至不一定占位置,通过以下方式能间接计算出滚动条的宽度。为视窗宽度,为滚动容器内容宽度,相减就是滚动条宽度,妥妥的动态计算。


  禁止长按操作


  有时不想用户长按元素呼出菜单进行、、、或等操作,声明禁止用户长按操作。


  有时不想用户盗文案,声明禁止用户长按操作和选择复制。


  但声明会让和无法输入文本,可对其声明排除在外。


  禁止字体调整


  旋转屏幕可能会改变字体大小,声明让字体大小保持不变。


  禁止高亮显示


  触摸元素会出现半透明灰色遮罩,不想要!


  禁止动画闪屏


  在移动设备上添加动画,多数情况会出现闪屏,给动画元素的父元素构造一个就能让动画稳定运行了。


  美化表单外观


  表单元素样式太丑希望自定义,来帮你。


  美化滚动占位


  滚动条样式太丑希望自定义,来帮你。记住以下三个关键词就能随机应变了。


  ::-webkit-scrollbar:滚动条整体部分::-webkit-scrollbar-track:滚动条轨道部分::-webkit-scrollbar-thumb:滚动条滑块部分


  美化输入占位


  输入框占位文本太丑,来帮你。


  对齐输入占位


  有强迫症的同学总会觉得输入框文本位置整体偏上,感觉未居中心里就痒痒的。里声明等于就能解决,但里还是未能解决,需将声明为才行。


  对齐下拉选项


  下拉框选项默认向左对齐,是时候改改向右对齐了。


  修复点击无效


  在苹果系统上有些情况下非可点击元素监听可能会无效,针对该情况只需对不触发的元素声明就能解决。


  识别文本换行


  多数情况会使用JS换行文本,那就真的了。若接口返回字段包含或,千万别替换掉,可声明交由浏览器做断行处理。


  开启硬件加速


  想动画更流畅吗,开启呗!


  描绘像素边框


  万年话题,如何描绘?


  控制溢出文本


  万年话题,如何控制文本做和?


  禁止点击穿透


  里点击操作会存在延迟,往往会造成点击延迟甚至点击无效,这个是众所周知的事情。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐