做电影网站会有什么惩罚,网站建设会计分录怎么做,网页前端技术有哪些,商场vi设计 知名公司文章目录 前言键盘呼起问题靠近底部的输入项被键盘遮挡底部按钮被顶上去 全面屏适配图片大小显示问题解决300ms延迟首屏优化 前言 这篇文章总结了我在工作中做H5遇到的一些问题#xff0c;包括我是怎么解决的。可能不是当下的最优解#xff0c;但是能保证解决问题。 单位适… 文章目录 前言键盘呼起问题靠近底部的输入项被键盘遮挡底部按钮被顶上去 全面屏适配图片大小显示问题解决300ms延迟首屏优化 前言 这篇文章总结了我在工作中做H5遇到的一些问题包括我是怎么解决的。可能不是当下的最优解但是能保证解决问题。 单位适配问题可看【H5移动端】前端H5移动端的单位适配方案集包括给你用例子讲明白什么是1像素的问题不定期补充~ 本文章未来也会不定期的补充~ 键盘呼起问题 靠近底部的输入项被键盘遮挡 就比如说有几个输入项表单刚好在靠近底部的位置当点击其中一项输入框时呼出了键盘然后这个键盘把输入项挡住了以至于用户看不到输入的内容。 这种情况一般是IOS和一些特定机型会出现的问题。大概原因应该就是呼出键盘后视图窗口高度变小了但我们的页面没有滚动所以之前的内容就跑到视图窗口下面了。 直到原因就知道怎么处理了就是把当时的输入项重新自动的滚动到视图窗口最底部即可。 如果是只有一个输入框需要处理可以这样 let input1 document.getElementById(input1) input1.addEventListener(focus, (){setTimeout((){input1.scrollIntoView(false)}, 300) // 延迟对应键盘呼出动画时间 }) // 或 input1.addEventListener(focus, (){setTimeout((){document.body.scrollTop document.body.scrollHeight}, 300) // 延迟对应键盘呼出动画时间 })但是实际上我们的页面会有很多的输入项不可能挨个这样处理。可以看看你用的第三方组件库有没有api支持一次性收集所有focus事件做统一处理。 当然这个问题一般情况下正常机型不存在的。 底部按钮被顶上去 当我们的表单页的提交按钮是固定在底部的时候呼出键盘有很多机型是会把底部按钮顶上来的。 原因是我们的底部按钮一般都是用position布局固定的当键盘呼出视窗高度变小自然看起来像是顶上去了。 所以可以这样想当键盘呼出的时候把底部按钮区域隐藏键盘消失时把底部按钮区域重新显示 const winHeight window.innerHeight; // 先拿到正常显示的高度 let footerDom document.getElementById(footer) window.addEventListener(resize, (){let curHeight window.innerHeight; // 当前视口小于正常时候就说明键盘呼出了if (curHeight winHeight) {footerDom.style.display none} else {footerDom.style.display block} })建议把底部区域封装成一个公共的组件然后实现上面的功能。 全面屏适配 全面屏适配目前浏览器已经帮我们把顶部的适配工作做好了也就是无论什么刘海屏水滴屏都不用管了。主要关心的只有底部手势区域。 其实一般情况下最简单的方法就是让UI设计同事无论在什么页面都在底部默认加个固定的手势预留区域。 例如在公共的底部操作区域组件默认加个底部padding。 不过也有正儿八经的适配方式我个人没怎么用过因为上面的简单方法已经可以解决问题了iPhoneX 适配方案 图片大小显示问题 你是否好奇为啥UI设计稿上总会有1X、2X、3X的不同尺寸图片给你使用。 那是因为给不同的设备缩放比用的具体原理可以看看前言引入的那篇文章。总之我们只需要根据不同缩放比显示不同大小的图片即可我称为倍图适配 .avatar{background-image: url(logo_1x.png); } media only screen and (-webkit-min-device-pixel-ratio:2){.avatar{background-image: url(logo_2x.png);} } media only screen and (-webkit-min-device-pixel-ratio:3){.avatar{background-image: url(logo_3x.png);} }但其实吧正常情况下我都是直接用最小的那个图片然后定个宽度根据postcss-px-to-viewport插件自己去适配单位大小。因为手机界面很小即使最小的图片放在上面也足够清晰了。除非是特定地方要求你要保证非常清晰例如logo那么可以用用倍图适配。 解决300ms延迟 过去手机浏览桌面的网页需要双击放大所以有了300ms延迟的时间去给第二次点击做判断。现在的手机网页基本都是针对手机大小专门做的网页所以已经不需要有这个机制了。 fastclick库适用于过去老旧浏览器 原理 监听touchend事件touchstart touchend会先于click触发使用自定义Dom事件 模拟一个click事件把原来的click事件禁用 现在浏览器 meta nameviewport contentwidthdevive-width 有了widthdevive-width这个就能告知浏览器这个网页就是移动端网页不需要300ms机制。 首屏优化 其实和PC的八九不离十可以详细看【工程化】收集平时积累的一些性能优化措施 这里说几个和PC不一样的。 App预取 就是app先获取要最终要展示的数据打开页面的时候直接获取渲染。例如公众号文章里面的图片和视频还是懒加载。 Hybrid混合 提前把html css js等资源下载到app中在app webview中使用file:// 协议加载页面文件再去请求数据数据获取还可以结合App预取。 SSR 这里我特地说下SSR就是服务端返回的html文件直接是我们平时获取的初始html文件获取数据更替数据后的最终文件直接渲染即可。 实现框架 Nuxt.js vuenode.jsNext.js reactnode.js 是说话没必要H5稿SSR我知道初心是为了照顾那些性能差的旧手机但是手机更新迭代这么快我认为手机首屏那一点页面真没必要还增加成本。