初级PWA Checklist Lighthouse工具可以自动化验证表中的很多项，同时在简易测试页面上也很有帮助。...用户体验 页面加载时内容不闪 测试 在PWA里面加载不同的页面，确保页面加载时内容或界面不会“跳动” 修复 确保所有内容，特别是图片和广告，在CSS或者元素属性里有固定尺寸。...从详情页回退到之前的列表页面时，列表页保持滚动距离 测试 在应用中找一个列表区域。向下滚动。触碰项目进入详情页。在详情页上下滚动。点击返回，确保列表区域滚动到详情链接/按钮触碰前的位置。...修复 用户点击返回时，恢复列表的滚动位置。一些路由库会有帮你做这个的特性。 触碰时，输入框不会被屏幕键盘遮挡 测试 找到一个有文本输入框的页面。把文本输入框滚动到刚好在屏幕底部。...点击输入框，验证键盘出现时其没有被遮住。
"跳转" 确认方法：加载PWA中的各种页面，并确保内容或UI不会在页面加载时“跳转”。...从详细信息页面返回，保留上一个列表页面上的滚动位置 确认方法：在应用程序中查找列表视图。向下滚动点击一个项目进入详细页面。在详细页面上滚动。...按返回，确保列表视图滚动到与细节链接/按钮被点击之前相同的位置。 改善方法：当用户按“返回”时，恢复列表中的滚动位置。有些路由库可以帮你完成这个功能。...下面是天狗网的页面，在列表中点击详情页后，再后退返回列表时，列表页仍然能滚到上次进入的位置 点击时，输入框不会被屏幕键盘遮蔽 确认方法：找到一个包含文本输入的页面。...滚动页面，将文本输入框放在屏幕上尽可能低的位置。点击输入并确认键盘出现时没有覆盖输入。
在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。...当输入框位于页面下部位置时，在 IOS 上，会将 webview 整体往上滚一段距离，使得该获取焦点的输入框自动处于可视区，而在 Android 则不会这样，它只会改变页面高度，而不会去滚动到当前焦点元素到可视区...兼容 IOS12 + V6.7.4+ 如果你在用 IOS12 和 V6.7.4+版本的微信浏览器打开上面表单输入的 demo ，就会惊奇的发现键盘收起后，原本被滚动顶起的页面并没有回到底部位置，导致原来键盘弹起的位置...所以猜测，其实是滚到底了，软键盘弹起，页面实现高度大于可视区高度，这样只能在软键盘弹起后，强行增加页面高度，使输入框可以显示出来。...了解软键盘弹起页面在 IOS 和 Android 上的表现差异是前提，其次是将焦点元素滚动到可视区，同时要考虑到第三方输入法和某些浏览器上的差别。
双端复用一套业务代码 跨 App：一些产品功能期望能在多个渠道投放上线，以工具类需求为主，如打车、买票、点餐 在可预见的未来，可能还会有这些跨平台需求： 跨轻应用：系统级即用即走的轻量级应用，如Android...跨平台是 Web 与生俱来的优势，浏览器和 WebView 都是 W3C 规范下的标准化 Web 容器，因此 Web 页面能够轻松投放到端外浏览器、端内 WebView、以及其它 App 提供的 WebView...技术跨端也存在其局限性： 平台能力：受限于 Web 标准容器，无法满足平台能力相关的需求，如相机、蓝牙、多媒体等 体验：移动端 Web 体验远不及 Native，主要体现在首屏加载慢、动画卡顿、长页滚动闪烁等场景...以类似的方式跨 Android、iOS、Web、Linux 四端 从技术角度来看，RN 与 Weex 在 Native 容器中提供了 JavaScript 运行环境，以及布局引擎，渲染层都采用 Native...业务框架依赖抽象的标准容器，而不与具体的特定容器相绑定，可替换为遵循容器标准的其它容器 基于标准框架，能够提供配套的脚手架、组件库、可视化搭建等配套开发工具。
可再互动 通过推送通知之类的功能简化了再互动。 可安装 用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。 可链接 可通过网址轻松分享，无需复杂的安装。...PWA vs Native App Native App：依赖运行的平台操作系统，比如Android或iOS，需要将应用提交到应用商店，比如Apple App Store或者Google Play Store...页面注入service worker代码示例： Responsive Web Design RWD是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现...，减少用户进行缩放、平移和滚动等操作行为。...随着各大浏览器对PWA技术的支持，未来会出现越来越多的PWA的应用。
（对于这点，ios本身是支持的，但是安卓却并不会主动让输入框出现在可视区域内） 4、对于部分ios系统下的部分微信webview内，发现软键盘收起时，滚动上去的页面没有滚动下来，造成了下面区域留出了一片灰色的区域...Android 软键盘弹起表现 同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动...；在滚动过程中，还会允许屏幕底部超出页面底部（「滚动过头」），以便让输入框尽可能露出来。...收起键盘后，「滚动过头」的部分会被弹回，fixed 元素发生重新计算，但页面并不会回到与打开键盘前相同的位置。...4、ios软键盘收起时页面不能自然滑落 对于部分ios系统下的部分微信webview内，发现软键盘收起时，滚动上去的页面没有滚动下来，造成了下面区域留出了一片灰色的区域。
在部分android机型上测试点击靠下的输入框时遇到弹出的软键盘挡住输入框问题，ios可自身弹起（ios自身的调整偶尔也会出问题，例如第三方键盘会遮挡，原因是第三方输入法的tool bar或者键盘也被当做可视区域...经测试发现android弹出键盘时有两种效果： 1.将activity挤压，键盘也占一部分activity空间； 2.键盘弹出在浏览器上面覆盖一层，不影响浏览器大小。...u.indexOf('Linux')>-1;//android终端 // alert('android'+isAndroid) if(isAndroid){ // android统一处理，不影响ios...所以为了统一效果，将底部按钮取消fixed，随页面滚动。 第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。...2.两个h5框架，iScroll、Native.js（虽然在这个问题上没啥用） 3.最终奥义：修改设计稿，三招 -> 使输入框不在页面的下半部分、采用分页设计、弹出输入层（ps：要和产品和设计沟通，客户不一定会让步
IOS 端微信H5页面上下滑动时卡顿和页面缺失 问题描述：在IOS端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。...例如下图，右图是正常页面，左边是IOS上下滑动后，卡顿导致如左图下面部分丢失。 解决办法：只需要在公共样式加入下面这行代码。...IOS键盘唤起，键盘收起以后页面不归位 问题描述：输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑。 解决办法：在输入框失失去焦点的时候添加一个事件，让页面回滚。...Vue中使用hash模式路由，微信H5页面在IOS分享异常 问题描述：IOS当前页面分享给好友，点击进来是正常，如果二次分享，则跳转到首页。...题外话：如果能用小程序写的页面，尽量上小程序吧，H5开发在微信开发者工具里看页面效果可能看不出问题，因为不能唤起软键盘。
可再互动 - 通过推送通知之类的功能简化了再互动。 可安装 - 用户可免去使用应用商店的麻烦，直接将对其最有用的应用“保留”在主屏幕上。 可链接 - 可通过网址轻松分享，无需复杂的安装。...PWA vs Native App Native App：依赖运行的平台操作系统，比如Android或iOS，需要将应用提交到应用商店，比如Apple App Store或者Google Play Store...页面注入service worker代码示例： if (navigator.serviceWorker) { navigator.serviceWorker.register('service-worker.js...Responsive Web Design RWD是一种网页设计的技术做法，该设计可使网站在不同的设备（从桌面电脑显示器到移动电话或其他移动产品设备）上浏览时对应不同分辨率皆有适合的呈现，减少用户进行缩放、平移和滚动等操作行为...随着各大浏览器对PWA技术的支持，未来会出现越来越多的PWA的应用。
端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友，...【该方法未验证】 题外话： 如果能用小程序写的页面，尽量上小程序吧，H5开发在微信开发者工具里看页面效果可能看不出问题，因为不能唤起软键盘。
端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友...【该方法未验证】 题外话： 如果能用小程序写的页面，尽量上小程序吧，H5开发在微信开发者工具里看页面效果可能看不出问题，因为不能唤起软键盘。
设备上，点击 input 框弹出键盘时，可能会将页面顶起来，导致页面样式错乱。...失去焦点时，键盘收起，键盘区域空白，未回落。 原因 键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。 ...是#/home，导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致，致使在 iOS 上分享失败。...img { -webkit-touch-callout: none; } ⭐️⭐️⭐️iOS 端微信 H5 页面上下滑动时卡顿 解决方案 给滚动元素加上-webkit-overflow-scrolling...body { -webkit-overflow-scrolling：touch; } ⭐️⭐️iOS 默认输入框内阴影重置 解决方案 阻止 iOS 默认的美化页面的策略-webkit-appearance
，迟早的问题而已，这种兼容性问题真的是很烦人的，文章很长，看是不可能看的了，所以收藏备用吧 本次文章主要描述两个问题 1、IOS11 下，键盘弹起时导致的光标错位 2、IOS13 下，键盘弹起再收起时导致的...定位元素输入框，唤起键盘，页面不能往上滚动的话，定位元素的 实际DOM 跟随页面被顶上去 上面我们得出了结论，那么我们来证明一下是否我们的结论是否正确 3证明一下猜想 1、证明光标错位时，定位元素实际DOM...那么我们从上面两种现象，可以得出一个结论 1、页面已经滚动到底， 定位元素输入框，唤起键盘，再收起键盘，定位元素的 实际DOM 会停留在唤起键盘的位置 ，跟显示的元素错位了 2、页面没有滚动到底，定位元素输入框...4为什么会这样 你仔细观察，在输入框被激活，唤起键盘时，页面的内容会被往上顶，从而往上滚动一些 ?...5解决办法 现在我们知道这个问题 “ 因为滚动到底部时，键盘强行把页面顶上去一部分，并且失焦时，页面没有复位 ” 所以我们可以在 输入框失焦的时候，把页面复位就好了 通常最简单的办法是 window.scrollTop
端微信h5页面上下滑动时卡顿、页面缺失 问题详情描述：在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，左边是ios上下滑动后...touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...3、ios键盘唤起，键盘收起以后页面不归位 问题详情描述： 输入内容，软键盘弹出，页面内容整体上移，但是键盘收起，页面内容不下滑 出现原因分析： 固定定位的元素 在元素内 input 框聚焦的时候...但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动 5、Vue中路由使用hash模式，开发微信H5页面分享时在安卓上设置分享成功，但是ios的分享异常 问题详情描述： ios当前页面分享给好友，点击进来是正常...【该方法未验证】 题外话： 如果能用小程序写的页面，尽量上小程序吧，H5开发在微信开发者工具里看页面效果可能看不出问题，因为不能唤起软键盘。
让我们来了解下哈 只有window窗体滚动 即页面只含有浏览器窗体默认的滚动条，窗体滚动条随页面内容而不断增长。 如手Q吃喝玩乐的站点首页， 在android机上就是使用window滚动 ?...（具体为什么ios上和android上会使用不同的滚动方式，可以去了解下=。=） 内滚动布局什么时候会使用了？...ios 页面顶部带有fixed输入框（解决软键盘弹出导致页面错位的问题） 例如，手Q吃喝玩乐的站点首页， 在ios机上便是内滚动布局 ? 桌面软件或者客户端，如群活动 ?...需求描述 ： 希望通过点击按钮，使绿色区域的item，能够定位到屏幕中间 这种需求很常见吧~ 那么我们先分析下页面， 可以从页面中看出，这个是一个内滚动布局单页页面。...为了使目标节点，移动到内滚动区域的中间线 我们最终需要知道当前目标节点距离中间线的偏移值，然后加上当前滚动区域的滚动条偏移值，便是我们需要滚动条滚动到的偏移值大小了。
前言 我所说的传统的方式是指，用 Java 或者 Kotlin 写安卓，用 Object-C 或者 Swift 写 IOS。...Flutter 是 Google 使用 Dart 语言开发的移动应用开发框架，使用一套 Dart 代码就能构建高性能、高保真的 iOS 和 Android 应用程序，并且在排版、图标、滚动、点击等方面实现零差异...PWA 打开后会缓存一些内容，之后再次访问即使没有网络也可以浏览之前的页面（如同IE时代的离线浏览）。 原生应用界面。...“快应用” 使用前端技术栈开发（语法跟 vue 的语法类似），原生渲染，所以很多 css 属性是不能用的，同时具备 H5 页面和原生应用的双重优点。...像 RN 和 Flutter ，他们是解决跨平台的问题，写一套代码，安卓、IOS 都能用，而且是原生的。 而像 PWA 、微信小程序，他们是用 web 的方式来达到跨平台的方式。
以 React 应用为例，从性能角度，其最重要的指标可能就是首屏渲染所花费的时间了。那么今天，我们要给大家分享的一个把优化做到极致的故事。...经过我们的数据测试，使用 PWA 直出缓存，首屏渲染的时间最好可以到400ms左右级别： PWA 直出细节优化 一、防页面跳动 因为对接口进行了动静分离，使用静态接口直出页面，然后在客户端拉取动态数据渲染完...二、IOS 渲染问题 很多的经验告诉我们，外联的 script 标签要放在 body 的后面，因为它会阻塞页面的 DOM 渲染。...经过测试发现，IOS 的 WebView ( UIWebView)渲染机制并不会上述一样，而是要等到后面的 JS 执行完之后才渲染页面，如果是这样，我们的直出渲染优化就没有效果了（因为 HTML 并不在最开始渲染...id=45616 扫码关注 IMWeb前端社区 公众号，获取最新前端好文 微博、掘金、Github、知乎可搜索 IMWeb 或 IMWeb团队 关注我们。 点击阅读原文获取更多参考资料
因此，在可用的开放网络技术的帮助下，PWA 为使用最新版本浏览器的用户提供了增强的网络体验，与 Android、iOS 或 Windows 等依赖于操作系统的应用程序相当。...在开发本机应用程序时，我们需要为每个平台维护一个代码库，但开发 PWA 只需要一个代码库。因此，它降低了可维护性。 本机应用程序会不断提醒用户新的更新。PWA 通过简单的页面刷新自动在后台更新内容。...PWA 的构建块 1.响应式：由于 PWA 提供跨设备兼容性，因此它必须在所有设备上响应。 2.Service worker：这是一个脚本文件，可以在不影响页面性能的情况下在后台异步运行任务。...这使 PWA 能够在离线模式下仅加载必要的数据. 因此，它可以减少页面加载延迟，也可以提高整体性能。...2.保护用户的隐私 3.保证内容的真实性 Manifest file 这是一个 json 文件，其中包含有关 PWA 的所有必要元数据。此文件还使 PWA 可跨设备安装。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
