Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Horizontal and vertical screen adaptation

You can do it with JS and CSS, so let’s talk about CSS

@media screen and (orientation:portrait){ #box{ background: red; } } @media screen and (orientation:landscape){ #box{ background: green; }}Copy the code
  • Screen screen
  • Orientation direction
  • Portrait vertical
  • Landscape transverse

Take bangs on the iphoneX

When iphoneX first proposed the concept of bangs, it took all software by surprise. For example, king of glory above, it was completely impossible to see how many coins there were, and it was hard to click on. If I had an iphoneX rival, it would be the welfare bureau.

So how we fit into the iphoneX was a headache at first.

After all, iphoneX is a mainstream mobile phone, in order to better support it, software vendors have come up with their own solutions, until now, in fact, iphoneX bangs when we only do websites, has not had too much impact.

So for the mobile end, we don’t need to deal with the top fit, but the bottom and left and right sides, we need to consider

Safety zone

The diagram above is our security zone. It is better to ensure that the content is displayed in the security zone, so that problems such as occlusion and incomplete display are not easy to occur.

Using the viewPort-Fit property, an iPhone X-specific style, he will secure web pages

<meta name="viewport" content="viewport-fit=cover>
Copy the code
  • cover
  • contain

Working with CSS methods

body{
    padding-bottom:constant(safe-area-inset-bottom);
    padding-bottom:env(safe-area-inset-bottom);
}
Copy the code
  • Constant: the value is smaller than IOS11.2
  • Env: takes effect if the version is later than IOS11.2

You can see that there’s a little bit of content down here, and this time the black line, it doesn’t block our text or anything else.

  • Safe-area-inset-lef Sets the left security zone
  • Safe-area-inset-right Specifies the right security zone
  • Safe-area-inset-top Sets the top security zone
  • Safe-area-inset-bottom Sets the security zone at the bottom

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage