This is the fourth day of my participation in Gwen Challenge

Record of minor issues dealt with in recent development:

1. Random phone number

Requirements:

Generate random phone numbers and scroll them in a single line (figure below).

Implementation:

Random Telephone Number:

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}`;
}
Copy the code

Scrolling effect:

$flippedLine: 50; $perSpeed:2; $flippingSpeed:0.3; // Page turn time, in seconds@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;
}
Copy the code

2. CSS: dashed line, semicircle, triangle

Requirements:

Dashed line, half circle, triangle

Implementation:

  1. The dashed lines are the traditional onesborder: 1px dashed #000;Unable to achieve the effect of UI draft, dashed line length and spacing cannot be adjusted. Use a gradient background to do this, and you can customize the length and spacing.
  .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;
  }
Copy the code
  1. Semicircles and triangles are common
  .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;
  }
Copy the code

3. IPhone X small black bar

Requirements:

Leave a small black bar of white space at the bottom of the iPhone X and a fringe at the top to avoid blocking content.

Related concepts:

Security area: The security area refers to a visual window range. Contents in the security area are not affected by corners, fringe sensor housing and Home Indicator. The blue area is shown below:

Viewport – fit:

After iOS 11, apple added an extension to the viewport meta tag for iPhoneX: viewport-fit. Used to set the layout of the web page in the visual window, three values can be set:

  • Contain: a visual window that contains everything on the web
  • Cover: The content of the web page completely covers the visible window (right)
  • Auto: indicates the default value, which is the same as the contain

Env () and constant () :

New in iOS 11, Webkit is a CSS function that sets the distance between a security zone and a boundary. There are four predefined variables:

  • Safe-area-inset-left: indicates the distance between the security zone and the left boundary
  • Safe-area-inset-right: indicates the distance between the security zone and the right boundary
  • Safe-area-inset-top: indicates the distance between the security zone and the top boundary
  • Safe-area-inset-bottom: The distance between the safe zone and the bottom boundary (the distance between the small black bar)

Note: Env () does not contain any information if it contains viewport-fit=cover. Browsers that do not support env() will ignore it.

Implementation:

  1. Example Add the viewport-fit attribute
    <meta name="viewport" content=viewport-fit=cover" />
Copy the code
  1. Set the CSS value as required
.fixedbtnCpt {
  height: calc(54px + env(safe-area-inset-bottom));
  padding: 0 12px env(safe-area-inset-bottom);
}
Copy the code

4. OSS file upload problem:

Question:

OSS uploads videos. Videos larger than 100m cannot be played after being uploaded.

Positioning process:

First of all, it was found that the URL of the video uploaded by the user had the parameter uploadId, which was different from that of the common uploaded URL. Therefore, the parameter was removed and the domain name + video path was directly accessed.

But after the test, there are still problems, so I contacted aliyun for assistance. (The feedback problem is already solved here, but it raises a new one.)

The first message is: if no caching is configured, we will limit the size of a single request to 100MB.

Check the upload request and find that cache-control: no-cache is contained in the Request Headers. As a result, the file is not cached and the source is returned every time the file is accessed. The file is too large and the complete MOOv header is not pulled, so the playback fails.

No no-cache is set anywhere in the checking code, and no default cache is set anywhere in the checking documentation.

As a result, the Chrome developer tool is enabled during upload, and disable cache is selected. This automatically assigns the no-cache attribute to all requests, causing the file to be marked as not cached.

Solutions:

When calling the upload API, set headers to public or otherwise to allow caching.