第一类是 Medium 上热门文章的翻译，其实我也翻译过： 在 Android 上使用协程（一）：Getting The Background 在 Android 上使用协程（二）：Getting started...在 Android 上使用协程（三） ：Real Work 说实话，这三篇文章的确加深了我对协程的理解。...在 Android 中，一般是不建议直接使用 GlobalScope 的。那么，在 Android 中应该如何正确使用协程呢？再细分一点，如何直接在 Activity 中使用呢？...协程在 Android 上的使用 GlobalScope 在一般的应用场景下，我们都希望可以异步进行耗时任务，比如网络请求，数据处理等等。当我们离开当前页面的时候，也希望可以取消正在进行的异步任务。...总结 以上简单的介绍了在 Android 中合理使用协程的一些方案，示例代码已上传至 Github。
-d：卸除设备。 -e ：启动加密编码。 -f：寻找第一个未使用的循环设备。 -o ：设置数据偏移量，单位是字节。...loop设备介绍 在类UNIX系统中，loop设备是一种伪设备（pseudo-device），或者也可以说是仿真设备。它能使我们像块设备一样访问一个文件。...在使用之前，一个loop设备必须要和一个文件进行连接。这种结合方式给用户提供了一个替代块特殊文件的接口。因此，如果这个文件包含有一个完整的文件系统，那么这个文件就可以像一个磁盘设备一样被挂载起来。...至此，顺便可以再理解一下loop之含义：对于第一层文件系统，它直接安装在我们计算机的物理设备之上；而对于这种被挂载起来的镜像文件（它也包含有文件系统），它是建立在第一层文件系统之上，这样看来，它就像是在第一层文件系统之上再绕了一圈的文件系统...实例 创建空的磁盘镜像文件，这里创建一个1.44M的软盘： dd if=/dev/zero of=floppy.img bs=512 count=2880 使用losetup将磁盘镜像文件虚拟成块设备：
contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe - area inset 变量，以确保重要内容不会出现在显示之外。...padding-top: var(safe-area-inset-bottom, 20px); } } safe-area-inset-top, safe-area-inset-right..., safe-area-inset-bottom, safe- area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和...，一定要判断 SDK 是否提供该方法 如果 Android 提供该方法，iOS 上调用就会出现一个方法调用失败等弹窗。...有些时候测试环境上没法复现这个 bug，测试环境和生产环境不一致，此时就需要紧急生产调试。 在 PC 端开发时，我们可以直接掉出控制台，使用浏览器提供的工具操作devtools或者查看日志。
当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。..., safe-area-inset-bottom, safe-area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left...使用 DSBridge 同时支持 iOS 与 Android 文档见参考资料 SDK小组 提供方法 注册方法 bridge.register bridge.register('enterApp', function...，一定要判断 SDK 是否提供该方法 如果 Android 提供该方法，iOS 上调用就会出现一个方法调用失败等弹窗。
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。..., safe-area-inset-bottom, safe-area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left...使用 DSBridge 同时支持 iOS 与 Android 文档见参考资料 SDK小组 提供方法 注册方法 bridge.register bridge.register('enterApp', function...，一定要判断 SDK 是否提供该方法 如果 Android 提供该方法，iOS 上调用就会出现一个方法调用失败等弹窗。
当手指从触摸屏上移开，滚动会立即停止 */ 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper {...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。..., safe-area-inset-bottom, safe-area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left...解决方案 使用 DSBridge 同时支持 iOS 与 Android 文档见参考资料 SDK小组 提供方法 注册方法 bridge.register bridge.register('enterApp...，一定要判断 SDK 是否提供该方法 如果 Android 提供该方法，iOS 上调用就会出现一个方法调用失败等弹窗。
当手指从触摸屏上移开，滚动会立即停止 */ 复制代码 解决方案 1.在滚动容器上增加滚动 touch 方法 将-webkit-overflow-scrolling 值设置为 touch .wrapper...contain：视图端口按比例缩放，以适合显示内嵌的最大矩形。 cover：视图端口被缩放以填充设备显示。强烈建议使用 safe area inset 变量，以确保重要内容不会出现在显示之外。..., safe-area-inset-bottom, safe-area-inset-left safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left...解决方案 使用 DSBridge 同时支持 iOS 与 Android 文档见参考资料 SDK小组 提供方法 注册方法 `bridge.register` bridge.register('enterApp...有些时候测试环境上没法复现这个 bug，测试环境和生产环境不一致，此时就需要紧急生产调试。 在 PC 端开发时，我们可以直接掉出控制台，使用浏览器提供的工具操作devtools或者查看日志。
如果明年又多几个尺寸那就会是没完没了的改改改。 正确的姿势 在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。...Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview...在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。...: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */ padding-left: env(safe-area-inset-left...否则 calc 会计算出一个不合法的值，则本句声明不会生效。这样在不支持 env 设备中也可以达到兼容的目的。 目前到这，在横屏场景下左侧的内容就不会被刘海遮挡住了： ?
如果明年又多几个尺寸那就会是没完没了的改改改。 正确的姿势 在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。...Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview...在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。...: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */ padding-left: env(safe-area-inset-left...否则 calc 会计算出一个不合法的值，则本句声明不会生效。这样在不支持 env 设备中也可以达到兼容的目的。
在 H5 中，我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。...和transform-style属性，可以解决在移动设备上动画闪屏的问题，提供更流畅的动画效果。...CSS 函数 constant() 和 env()，以及四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top...现象 在某些 Android 设备的原生浏览器中，使用 position: sticky 实现的元素不能正常吸顶。...解决这个问题的一种方法是将日期字符串中的 - 替换为 /。
1.4.3.1 dpr是什么dpr全名叫device pixel ratio，是设备上物理像素和设备独立像素的比率，公式表示就是：window.devicePixelRatio = 物理像素 /设备独立像素此值也可以解释为像素大小的比率...再来看下图片模糊的问题，大多发生在高dpr的设备上使用低倍图场景，所以图片我们直接使用2倍图即可，因为大部分的设备dpr为2，对于一些dpr>=3的特殊设备，我们也可以使用媒体查询来适配即可.bg {...)：在Viewport顶部的安全区域内设置量（CSS像素）constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）constant(safe-area-inset-left...)：在Viewport左边的安全区域内设置量（CSS像素）constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）然后给body设置一下安全区域...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。
问题： 当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...因为 env() 仅在 iOS 11.2+设备上可用，所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant()，但依旧建议都引入。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。...); padding-left: env(safe-area-inset-left); } 结果： 在合适的地方设置你的padding之后，你已为你的用户转变了体验：从“压扁适应”到
问题： 当 iPhone X 被旋转为横向时，设备左右可得到的内容区域是不一样的，这是因为需要取决于设备的绝对方位和 sensor housing 的位置，你站点内容竖直方向的安全区域在...足够友好的是，苹果已经提供了一个CSS 方法和一些预定义的CSS 变量，来应对这重担： env() 和 safe-area-inset-*。...因为 env() 仅在 iOS 11.2+设备上可用，所以目前你依旧需要引入 constant() 作为回退方案。iOS 11.2 好像一直也会支持 constant()，但依旧建议都引入。...在我们的例子中，我们使背景填充整个屏幕但使内容约束到安全区域，所以我们在内部元素的 containers 上应用了 padding。...); padding-left: env(safe-area-inset-left); } 结果： 在合适的地方设置你的padding之后，你已为你的用户转变了体验：从“压扁适应”
使用苹果提供的新属性 解决方案 苹果对于iPhone X上H5页面的适配，提供了特殊属性支持，包括meta标签的viewport属性值中加入viewport-fit和加入constant(safe-area-inset-X...，所以苹果提供在css中设置constant(safe-area-inset-X)距离来规避遮挡问题。...iPhone X模拟器 H5调试 介绍 加入适配代码后，在没iPhone X的情况下，可以通过iPhone X模拟器调试，像手机QQ／手机空间里的H5页面，可以通过在模拟器上安装手机QQ／手机空间app...image.png 这种方法对于我们要调试线上H5的其他问题、要测试其他iOS设备找不到真机时同样适用。...最后 经过分析，使用官方提供的新属性是三种里面较佳的方案，不过使用在适配过程中应当整体考虑所有机型，webview的类型及布局、还有横竖屏对contstant(safe-area-inset-X)／env
在适配过程中，我们尝试了这三种方案，如下。 解决方案1 客户端适配 客户端直接将 webview 的安全区域限制在除去安全区域的区域内。...解决方案3 使用苹果提供的新属性 苹果对于 iPhone X 上 H5 页面的适配，提供了特殊属性支持，包括 meta 标签的 viewport 属性值中加入 viewport-fit 和加入 constant...遮挡的问题，所以苹果提供在 css 中设置 constant(safe-area-inset-X) 距离来规避遮挡问题。...这种方法对于我们要调试线上 H5 的其他问题、要测试其他 iOS 设备找不到真机时同样适用。...最后 经过分析，使用官方提供的新属性是三种里面较佳的方案，不过在适配过程中应当整体考虑所有机型，webview 的类型及布局、还有横竖屏对contstant(safe-area-inset-X) / env
safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top：安全区域距离顶部边界距离...safe-area-inset-bottom：安全区域距离底部边界距离 上面的方法与属性的组合目的就是计算出安全的边距。...这个边距只针对需要边距的设备（如：iphonex）生效。 有了这个边距，接下来我们不论是 margin、padding还是其他，只要能将这个边距空出来就能实现安全距离了。...当然，有的时候我们还需要再安全距离的基础上多上一些距离，此时 可以考虑用 css3 的 calc 属性 注意 通过 margin、padding、position 等空白出来的边距有时候会出现透明的情况...然后，在 div 盒子内部，通过对子元素设置 margin、padding 安全距离 来实现不透明的安全边距。
随着这两年苹果坚定不移的走刘海屏路线，Hybrid 页面在 iPhoneX 上刘海屏的适配也是每个前端开发的小伙伴都会碰到的问题，今天就记录一下我关于刘海屏适配的部分经验。...2、H5 页面在 iOS 中占据全屏页面，在这种情况下，除了要兼顾底部小黑条，我们还要处理页面上部跟 状态栏接触的部分，避免内容出现在状态栏上。...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。...当你的页面不使用原生导航栏铺在整个屏幕中时，这就是一个不错的适配方案。...这里要注意的是，实测时，对于 iPhone XR 我用在 stackoverflow 上找到的 media query 条件来判断不生效，后来经过查找资料，我找到一个在 iPhone XR 上实际可用的条件
我们开发过程中也是以这个 设计像素为准。 实际上，从苹果提出视网膜屏幕开始，才出现设备像素比这个概念，因为在这之前，移动设备都是直接使用物理像素来进行展示。...当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种 Android设备仍然不能做到在展示上完全相等。...3.2 移动端开发 在 iOS、 Android和 ReactNative开发中样式单位其实都使用的是设备独立像素。...iOS的尺寸单位为 pt， Android的尺寸单位为 dp， ReactNative中没有指定明确的单位，它们其实都是设备独立像素 dp。...函数内部可以是四个常量： safe-area-inset-left：安全区域距离左边边界距离 safe-area-inset-right：安全区域距离右边边界距离 safe-area-inset-top
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
