阅读 246

日常开发记录:电话号码滚动及iPhone X小黑条等

这是我参与更文挑战的第4天,活动详情查看:更文挑战


近期开发中处理的小问题记录:

1. 随机电话号码

需求:

生成随机电话号码,并单行滚动展示(如下图)。

image.png

实现:

随机电话号码:

function generateRandomPhoneNumber() {
  const numbers = ["139", "138", "137", "136", "135", "134", "159", "158", "157", "150", "151", "152", "188", "187", "182", "183", "184", "178", "130", "131", "132", "156", "155", "186", "185", "176", "133", "153", "189", "180", "181", "177"];
  const prefix =
  numbers[parseInt(Math.random() * numbers.length, 10)];
  const suffix = Math.random().toString().replace("0.", "").slice(0, 4);
  return `${prefix}****${suffix}`;
}
复制代码

滚动效果:

$flippedLine: 50; // 总行数
$perSpeed: 2; // 每行停留时间
$flippingSpeed: 0.3; // 翻页时间,单位秒

@keyframes flipped {
  @for $i from 1 through $flippedLine {
    #{$i/$flippedLine*100-(100/($perSpeed*$flippedLine)*$flippingSpeed)}% {
      transform: translateY(-($i - 1) / $flippedLine * 100%);
    }
    #{$i / $flippedLine * 100}% {
      transform: translateY(-$i / $flippedLine * 100%);
    }
  }
}

.phone {
  animation: flipped $flippedLine * $perSpeed * 1s linear infinite;
}
复制代码

2. CSS: 虚线、半圆、三角

需求:

虚线、半圆、三角

image.png

实现:

  1. 虚线使用传统的border: 1px dashed #000;无法达到UI稿的效果,虚线长度和间隔无法调节。于是使用渐变背景的方式来实现,可以自定义长度和间隔。
  .dashed {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(90deg, #c4ae78 60%, rgba(255,266,0) 0);
    background-size: 7px 1px;
    background-repeat: repeat-x;
  }
复制代码
  1. 半圆和三角都很常规
  .semicircle {
    height: 14px;
    width: 7px;
    border-bottom-right-radius: 14px;
    border-top-right-radius: 14px;
    background-color: #dc4a4a;
  }

  .triangle {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
  }
复制代码

3. iPhone X 小黑条

需求:

在 iPhone X 底部留出小黑条的空白,顶部留出刘海屏的位置,避免内容被挡住。

image.png

相关概念:

安全区域: 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

image.png

viewport-fit:

iOS 11 之后的版本,苹果公司针对 iPhoneX 适配增加了一个 viewport meta 标签的扩展:viewport-fit。用于设置网页在可视窗口的布局方式,可设置三个值:

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

image.png

env() 和 constant():

iOS 11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

  • safe-area-inset-left:安全区域距离左边边界距离
  • safe-area-inset-right:安全区域距离右边边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离 (小黑条的距离)

注意:当 viewport-fit=contain 时 env() 是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持env() 的浏览器,浏览器将会忽略它。

实现:

  1. 增加viewport-fit属性
    <meta name="viewport" content=viewport-fit=cover" />
复制代码
  1. 根据需求设置css值
.fixedbtnCpt {
  height: calc(54px + env(safe-area-inset-bottom));
  padding: 0 12px env(safe-area-inset-bottom);
}
复制代码

4. OSS文件上传问题:

问题:

OSS上传视频,大于100m的视频上传后无法播放。

定位过程:

首先定位到用户上传的视频url带了uploadId参数,与普通上传的url不一样,于是改为去掉了参数直接访问 域名+视频路径。

但测试后都还是有问题,于是联系了阿里云的人协助。(其实这里已经解决了反馈的问题,但引发了一个新的问题。)

对方首先告知:如果配置了不缓存,我们会限制单个请求大小为100MB。

查看上传请求发现request headers 里包含了 cache-control: no-cache ,导致该文件没有使用缓存,每次请求访问文件时都回源,文件太大又导致了没有拉完整的 moov 头,所以播放失败。

检查代码没有任何地方设置no-cache,查看文档也没有地方对cache有默认设置。

最后发现是由于上传时打开了Chrome开发者工具,选中了disable cache,自动对所有请求加上了no-cache的属性,导致文件被标记为不缓存。

解决方法:

调用上传api时,将headers设置为public或其他,允许缓存。

文章分类
前端
文章标签