我们可以通过以下三种方案进行适配~下面就让我来逐一介绍吧！ 客户端适配 解决方案 客户端直接将webview的安全区域限制在除去安全区域的区域内。...缺点：对于全屏／透顶标题栏／横屏情况都要用不同的css代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似iPhone X plus这样的机型，适配工作就要重新来过。...)和env(safe-area-inset-X) ，这些属性是与iOS11以上的所有iPhone机型（不仅仅包括iPhone X）都相关的，故以iOS版本为区别具体分析一下全屏下的H5页面： 1....，所以苹果提供在css中设置constant(safe-area-inset-X)距离来规避遮挡问题。...H5 调试 安装应用后，在应用里访问H5页面，然后打开Safari（需要开启Safari的开发工具），在菜单中选择开发-Simulator-页面地址 ，就可以用Safari的检查器对其作调试了。
在适配过程中，我们尝试了这三种方案，如下。 解决方案1 客户端适配 客户端直接将 webview 的安全区域限制在除去安全区域的区域内。...缺点：对于全屏 / 透顶标题栏 / 横屏情况都要用不同的 css 代码进行适配，不够灵活。另外，如果苹果下一年又发布了类似 iPhone X plus 这样的机型，适配工作就要重新来过。...(safe-area-inset-X) 和 env(safe-area-inset-X) ，这些属性是与 iOS 11 以上的所有 iPhone 机型 (不仅仅包括 iPhone X ) 都相关的，故以...遮挡的问题，所以苹果提供在 css 中设置 constant(safe-area-inset-X) 距离来规避遮挡问题。...最后 经过分析，使用官方提供的新属性是三种里面较佳的方案，不过在适配过程中应当整体考虑所有机型，webview 的类型及布局、还有横竖屏对contstant(safe-area-inset-X) / env
优点：在原生中适配，h5页面不用更改任何一句代码。 缺点：1)意味着如右图某些通栏页面无法实现， ?...css 函数 env() 和 constant()这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持 env 函数 必须在 ios >= 11.2...image safe-area-inset-top ：视口顶部到安全区域的距离（以CSS像素为单位）,一般情况下是 0。...safe-area-inset-right ：视口最右边到安全区域的距离（以CSS像素为单位）,一般情况下是 0。...safe-area-inset-left ：视口最左边到安全区域的距离（以CSS像素为单位）在刘海全屏的时候 top 为 88px。
或 45px。...CSS: 我们希望为被 sensor housing 遮挡的元素设置 padding 值。...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。...); padding-left: env(safe-area-inset-left); } 结果： 在合适的地方设置你的padding之后，你已为你的用户转变了体验：从“压扁适应”到
这边我为了演示，新建了一个 constant.js。在 constant.js 定义了一些变量和函数。...示例： // Worker.js importScripts('constant.js'); // 下面就可以获取到 constant.js 中的所有变量了 // constant.js // 可以在...// 可以在 Worker 中使用 function c() { console.log('test'); } 调试方法 写代码难免要进行调试。...这个与普通的 Worker 方法一样，使用 importScripts 调试方法 在浏览器中查看和调试 SharedWorker 的代码，需要输入 chrome://inspect/ ServiceWorker...调试方法 在浏览器中查看和调试 ServiceWorker 的代码，需要输入 chrome://inspect/#service-workers 演示效果 上面代码中，我缓存了 131.png。
或 45px。...CSS: 我们希望为被 sensor housing 遮挡的元素设置 padding 值。...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。...); padding-left: env(safe-area-inset-left); } 结果： 在合适的地方设置你的padding之后，你已为你的用户转变了体验：从“压扁适应”
iOS 中的 safari，为了实现双击缩放操作，在单击 300ms 之后，如果未进行第二次点击，则执行 click 单击操作。也就是说来判断用户行为是否为双击产生的。...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。...)，作用是在 env() 不生效的情况下，给出一个备用值。 constant（） 被 css 2017-2018 年为草稿阶段，是否已被标准化未知。...生产环境中不允许出现，所以，使用时需要对环境进行判断。 import Vconsole from 'vconsole' if (process.env.NODE_ENV !...- 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动 IOS ：设置 - Wi-Fi - 选中网络, 点击感叹号, HTTP 代理手动 手机打开浏览器或者 app 中 H5 页面 打开桌面日志网站进行调试
4.运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。...4.运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。...['style-loader','css-loader'] } ] } }; 在src文件夹创建css文件夹,css文件夹下创建css1 css body{ background:.../css/css1.css') 重新webpack一下 其它 vscode Chrome-debug插件 在launch.json中添加 , { "name": "使用本机 Chrome...调试", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/index.html
contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。...)，作用是在 env() 不生效的情况下，给出一个备用值。 constant（） 被 css 2017-2018 年为草稿阶段，是否已被标准化未知。...生产环境中不允许出现，所以，使用时需要对环境进行判断。 import Vconsole from 'vconsole' if (process.env.NODE_ENV !...- 长按选中网络 - 修改网络 - 高级 - 代理设置 - 手动 IOS ：设置 - Wi-Fi - 选中网络, 点击感叹号, HTTP 代理手动 手机打开浏览器或者 app 中 H5 页面 打开桌面日志网站进行调试...参考资料 Safari CSS Reference MDN touch 事件 MDN css var() MDN css env() csswg env() drafts fastclick 源码 DSBridge-Android
概括来讲： 为了避免 iphoneX 的刘海和底部出现空白，苹果已经把 viewport-fit 增加到了 CSS Round Display 规范中。...通过设置 viewport-fit 的值让 viewport 填充满整个屏幕。 为了避免填充满屏幕后页面内容被刘海底部挡住，使用 env 函数设置 padding 值。...他们引入了 User Agent properties 的概念，用来在 css 中使用用户代理提供的变量，比如 safe-area-inset-left 等，参考 [css-variables] User...注意一开始苹果提出的是 constant 方法，最后 CSS 工作组讨论后变更为 env 方法，所以在 IOS 11 中，仅支持 constant，而在 iOS 11.2+ 中移除了 constant，...替换为 env env 支持使用 calc() 方法进行计算 .post { padding-left: calc(env(safe-area-inset-left) + 12px); } Viewport
)：在Viewport顶部的安全区域内设置量（CSS像素）constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）constant(safe-area-inset-left...)：在Viewport左边的安全区域内设置量（CSS像素）constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）然后给body设置一下安全区域...*/} 再来说一下env这个css函数：env()函数以类似于var函数的方式将用户代理定义的环境变量值插入到你的 CSS 中去。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...但是对于ios < 11.2的系统来说，需要使用constant函数来替代env进行兼容。通过设置viewport-fit 和 安全区域，就能完美对刘海屏进行适配了。
Node.js 调试中的环境变量 主机操作系统中的环境变量负责控制 Node.js 应用程序的具体设置。...最常见的环境变量是 NODE_ENV，一般在调试时被设定为 development、在 production 过程中则被设定为 production。...大家可以在 Linux/macOS 上这样设置环境变量： NODE_ENV=development 在 Windows（旧版 DOS）命令行中这样设置： set NODE_ENV=development...在 Windows Powershell 上则是这样设置： $env:NODE_ENV="development" 应用程序可以检测环境设置，并在必要时启用调试消息，例如： // running in...使用 Node.js 命令行选项进行调试 在启动应用程序时，您可以将命令行选项传递给 node 或 nodemon 运行时。
:PATH}：系统中的环境变量 VSCode调试配置项说明 request：请求配置类型，可以为launch（启动）或attach（附加） 下面是launch 和 attach 类型共有的属性 MD protocol...runtimeVersion： 设置运行时可执行程序的版本，如果使用nvm，可以切换node.js版本 env： 添加额外的环境变量 envFile： 文件加载环境变量 console： 配置终端可以是外部终端或者内部集成终端...只需在模板或CSS/SCSS中声明类，然后在任何地方都可以看到它。...TypeScript Importer 在工作空间文件中自动搜索TypeScript定义，并提供所有已知符号作为完成项以允许代码完成。...快速查看更改行或代码块的对象，原因和时间。回顾历史，以进一步了解代码的演变方式和原因。毫不费力地探索代码库的历史和演进。
那么就可以直接通过它来访问CSS或者Sass中的内部样式类了。...=abcdef npm start 添加自定义环境变量文件.env 项目根目录下创建.env文件，文件内部添加 key=value的配置可以直接应用于项目的编译中。...REACT_APP_NOT_SECRET_CODE=abcdef Note: 如果创建自定义的环境变量必须以REACT_APP_开头....在项目中使用环境变量 在项目中可以直接用process.env.XXX访问我们的自定义的环境变量。...Prettier - Code formatter ES7 React/Redux/GraphQL/React-Native snippets eslint HTTPS托管静态站 有时候需要用HTTPS进行调试相关结构
Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具的方式有： 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查...快速预览媒体查询 点击媒体查询条形，调整视口大小和预览适合目标屏幕大小的样式 查看关联的 CSS 右键点击某个条形，查看媒体查询在 CSS 中何处定义并跳到源代码中的定义 元素面板（Elements）...通过 DOM 更新实时修改页面的内容和结构 隐藏 DOM 两种方式： 右键选择某个元素，然后选择 Hide element 选中某个元素，然后使用快捷键 H 设置 DOM 断点 设置 DOM 断点以调试复杂的...这是因为开发者很少需要在 top 以外的任意环境中操作。 输入一个变量，期待返回一个值，只是为了查看该变量是否为 undefined（因为该变量是在不同环境中定义的），这会非常令人困惑 ?...源代码面板（Sources） 在源代码面板中设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器 格式化混淆代码 在某些情况下，我们需要对混淆的代码做一定的调试
我们希望在开发环境中加载非缩小的 JavaScript 和 CSS 文件，以便于调试。类似地，如果存在未处理的异常，我们需要开发人员异常页面，以便我们可以理解异常的根本原因并在需要时进行修复。...许多组织通常设置其临时环境以与服务提供商进行交互，以进行完整的端到端测试。...我们通常不会在演示环境中进行故障排除和调试，同时为了获得更好的性能，我们需要加载缩小的 JavaScript 和 CSS 文件。 如果存在未处理的异常，则显示用户友好的错误页面而不是开发人员异常页面。...如果需要，我们也可以在操作系统中进行设置。...在“变量值”文本框中输入Development ? 单击“确定”关闭所有弹出窗口 在staging 或production环境中，我们通常在操作系统中设置此环境变量。
env 函数 在介绍适配之前，我们先说一下适配用到的关键 CSS 函数 —— env()。env()函数以类似于var函数的方式将用户代理定义的环境变量值插入到你的 CSS 中去。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...=cover"> 这么设置之后，视图端口被缩放以填充设备显示。...而当你使用了原生导航栏，仅仅需要适配底部小黑条时，解决方案就更简单了，简单设置 safe-area-inset-bottom就可以： body { padding-bottom: constant(...最后，如果这篇文章有帮助到你在适配中填坑，请给我点个赞哦 ?
保存到修改后的CSS文件 点击您编辑的 CSS 文件的名称。会将其打开到“Sources”窗格，然后可以使用您应用的实时编辑进行保存。...您可以在其中键入任何字符串以匹配源代码，或者也可以使用 CSS 选择器让 Chrome 为您生成一个图像： ?...Watch 操作 不需要一次又一次地写一个变量名或一个表达式，您可以在调试会话期间检查很多变量名或表达式，将它添加到 Watch 表列表中就行了。 ?...XHR /获取调试 从调试器打开 XHR / Fetch 断点面板。 您可以将其设置为在任何时候发送 XHR / Fetch 请求，或者仅限于特定的呼叫： ?...调试DOM修改 右键单击某个元素并在子树修改上启用 Break：每当脚本遍历该元素的子元素并修改它们时，调试器将自动停止以让您检查发生了什么。 ?
，还因为Chrome开发者工具提供了大量的便捷功能，方便我们前端调试代码，我们在日常开发中是越来越离不开Chrome，是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆。...合理运用好条件断点能够提高调试的效率与准确性，使开发人员能更专注于在期望的场景下进行调试。...设置条件断点或断点 Element 标签页对 CSS 的控制 在网页开发过程中，经常需要在脚本中控制不同条件下页面的样式展示，例如页面中的标签颜色，位置，大小等等，在 Chrome...目前的 Firebug 及 IE 自带的开发者工具都不支持对脚本的直接修改，导致在 Firefox 或 IE 中调试脚本时，如果需要对代码进行修改，需要先去修改脚本源文件，再同步至应用服务器，再清理浏览器缓存...使用控制台打印变量值或方法的返回结果 当断点被触发进入到调试模式时，我们可以将当前任意存在的变量或方法输入到控制台中，按下回车后，控制台便会返回相关的结果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
