Two previous articles (Viewport And Rem) on equal proportion adaptation have been shared, which respectively introduce two concrete applications for equal proportion adaptation by width. However, this solution is not perfect by itself, so today we will discuss how to apply this patch

First, what are the defects?

Since it is an equal fit, we can only base one side of the container on the other side, and usually we do equal proportions by width (for example, we solidify the container width to 750 via Viewport, and then write as much as possible in the design draft efficiently).

For the most part, this is a reasonable and efficient solution, and while the height can be exceeded in containers with different aspect ratios, our pages can generally scroll vertically, and it doesn’t matter if you exceed it. But what if the product says the page can’t be rolled? Must let the user watch all content in one screen!!

OK, if I hate design, I’ll hate it! “For a page like this that requires a full screen display, you should put the main content in a safe area so that the main content is not invisible on a short screen.”

One way to do that is to calculate the aspect ratio of the screen and dynamically narrow the space on the short screen, but it is too much work!!

Two, whether there is a solution

Since the discrete adjustment of the area spacing is so painful, it is necessary to explore a “short and fast” path. It is not hard to find that pages that do not allow users to scroll vertically are usually operational covers with fewer elements and a unified background, such as this:

What if the short screen was scaled equally by height, while making sure that the normal screen matched equally by width?

Three, specific landing

1) First of all, the normal plan of equal width adaptation should be implemented as it should be. After all, to ensure that the effect of normal width to height ratio is not good, we only need to make a small addition on this basis (so it is called patching law).

2) Get the width and height of the screen and compare it with the width and height ratio of the design draft (designers generally follow the 750 figure, also known as iphone6/7/8, 375:667), if

Screen aspect ratio > design aspect ratioCopy the code

In other words, the height of the screen is low, which points to the battlefield we’re dealing with

3) Make sure that the main content of the page is wrapped in a TAB (PS: this does not include the background) and that the height and width of the main content area are fixed to the height and width of the design draft

<style>
  .mainContent {
    width: 750px;
    heigh: 1080px;
  }
</style>
<body class="bg">// Uniform background color, background image here, pay attention to<div class="mainContent">// The main content is wrapped here...</div>
</body>
Copy the code

4) Calculate the Scale of the Scale and set the Scale for MainContent

  // Pseudo code, cannot copy, cannot copy
  const scale = containerHeight / mainContentHeight
  if (shortScene) {
    mcRef.setStyle({
      transform: `scale(${scale}.${scale}) `})}Copy the code

Finish the work ~~

conclusion

Although the article used many exclamation marks, but I am a gentle person, welcome to add wechat to chat about technology: Facemagic2014