I have been in touch with the development of mobile terminal in my work, so I have recently learned something about mobile terminal.

Why the 1px problem

When developing a mobile project, the UI designer wrote a 750*1334 pixel design for a device with a 375*667 screen resolution. For the UI, this 1px is relative to 750*1334 pixels, and we wrote a 1px CSS relative to 375*667 pixels. So a 750*1334 map is 2px

At this point we send out two questions:

  1. Why does UI target375 * 667The equipment design of750 * 1334The figure of
  2. Why not?0.5 px.

Why design750 * 1334The figure of

Let’s start with a picture:

A brief introduction to these concepts: Screen size, physical resolution (PX), logical resolution (PT), Device pixel ratio (DPR), pixel density (PPI)

The screen size

“Inch” (abbreviated to “in”) means “thumb” in Dutch, and an inch is the width of the average person’s thumb at the bottom of a fingernail.

Inches and centimeters: 1 inch = 2.54 centimeters

Physical resolution (PX)

First you need to understand pixels and resolution

  • What is pixel (PX) :

Pixel, or pixel, is the most basic point on a screen that displays data. It’s not a unit of length in nature, it can be drawn very small or very large. If the dot is small, the picture is clear, we call it “high resolution”, and vice versa, “low resolution”. Therefore, the size of the “point” will “change”, also known as the “relative length”. In terms of computer technology, a pixel is the smallest unit that hardware and software can control. An image typically contains thousands of pixels, each with its own color information, packed tightly together. Because of the illusion of the human eye, these combined pixels are treated as one complete image.

  • What is resolution

Screen resolution is the number of pixels, in pixels, vertically and horizontally. Screen resolution A setting that determines how much information is displayed on a computer screen, measured in horizontal and vertical pixels. For a screen of the same size, when the screen resolution is low (for example, 640 x 480), fewer pixels are displayed on the screen and individual pixels are larger. When the screen resolution is high (for example, 1600 x 1200), many pixels are displayed on the screen and each pixel is small. As shown in the figure:

Physical resolution is the number of pixels on the screen vertically and horizontally

Logical resolution (PT)

Pt is an absolute length that does not vary with the density of pixels on the screen. It is the same as millimeters and centimeters, but it is much smaller. Size 1/72 inch (1pt = 1/72 Inc = 0.035694cm). On the non-retina iPhone (iPhone 3G), Apple dictates 1px=1pt, meaning pt and pixel are one-to-one.

  • What is logical resolution

For physical resolution, truly, truly, the hardware can display images with more pixels, each pixel of the display is controlled by the software one by one, this is the logical resolution, for historical reasons (a joke), logical resolution of 1 px physical pixels in the need to use the direction of 2 px or more pixels to display, Logical resolution is a software-level mapping of pixels up and down the screen

Device Pixel ratio (DPR)

Device Pixel Ratio (DPR) is the ratio of physical pixels to device independent pixels. It is the ratio of logical pixels mapped to physical pixels, which is realized by underlying software

A few years ago, we still used mobile phones with very low resolution. Each physical pixel was controlled by software, and the physical pixel corresponed with the logical pixel one by one. The pixel ratio of the device was 1.

However, with the development of technology, low-resolution mobile phones can no longer meet our needs. Soon, higher-resolution screens were created, like the black phone below, which has a resolution of 640×940, exactly double that of the white phone.

In theory, images and text of the same size on a white phone will be zoomed twice as large on a black phone because it has twice as much resolution. With higher resolution phones, page elements will get smaller and smaller.

However, that’s not the case. Smartphones that we use today, no matter how high the resolution, display similar interface proportions. The Retina Display, which jobs first introduced at the launch of the iPhone4, solves this problem and makes it a generational phone.

In the retina screen used on the iPhone4, the 2×2 pixels are used as one pixel to make the screen look more refined, but the size of the elements does not change

As can be seen from the above, iPhone4 uses 2×2 pixels as one pixel, so the pixel ratio of the device is 2

Pixel density

PPI: The number of pixels Per Inch

PPI can be used to describe the sharpness of a screen and the quality of an image

When using PPI description images, the higher PPI is, the higher the picture quality is; when using PPI description screens, the higher PPI is, the clearer the screen is

I want to answer

It can be seen that the design draft is 750*1334 in order to make the UI draft clearer and the picture icon clearer (the origin of @2x and @3X pictures), and to better match the physical pixels of the screen

Why not write 0.5px:

Chrome has rounded 0.5px to 1px, While Firefox/Safari can draw half a pixel of edge, and Chrome will treat anything less than 0.5px as 0, while Firefox will treat anything less than 0.55px as 1px. Safari sees no less than 0.75px as 1px, and a closer look at iOS on the phone shows Chrome with a edge of 0.5px, while Android (5.0) native browsers don’t. So just setting 0.5px varies a lot from browser to browser, and we see that different browsers on different systems treat the px of the decimal point differently. So if we set the units to decimal px including width and height, it’s not very reliable, because different browsers behave differently. As shown below:

You can input link address: service-ph6ff7lw-1257620930.gz.apigw.tencentcs.com/1px.html

The solution

Project analysis

From the above, the 1px in our CSS will be mapped to the 2px of the physical pixel. How can we convert this 2px to 1px?

  1. Write directly0.5 px.
  2. It’s implemented by scaling2pxconvert1px
    • throughThe transform: scale (0.5)
    • throughviewportIn theInitial - scale = 0.5
  3. Through the picture simulation1px
  4. tailoring
    • throughbox-shadown
    • Clipping by gradient percentage
  5. Using SVG

1, 0.5 px

At WWDC, the 1px scheme was given, and when written at 0.5px, a physical pixel-width border was displayed instead of a CSS pixel border. So on iOS, you can write it like this

border: 1px solid # 999;
Copy the code
  • Advantages: Simple, no side effects
  • Cons: Supports iOS 8+, android to be compatible

Transform :scale(0.5)

Article 1 the edge

How it works: Set the background color to the border color, set the width and height to 1px, and use scale to scale

Note: Scaling can also be done using scalcX or scaleY

/* 1 edge */
.scale {
    position: relative;
}
.scale::after {
    position: absolute;
    content: "";
    width: 200%; /* Width 2 times */
    height: 1px; /* Height is 1px */
    transform: scale(0.5); /* Shrink by 1 */
    transform-origin: left top; /* Scale from the top left corner */
    background-color: # 999;
    top: 0;
    left: 0;
}
Copy the code

Article 4 the edge

/* 4 edges */
.scale-4 {
    position: relative;
}
.scale-4::after {
    position: absolute;
    content: "";
    /* Width and height are 2 times */
    width: 200%;
    height: 200%;
    transform-origin: left top; /* Scale from the top left corner */
    border: 1px solid # 999; /* Set border */
    box-sizing: border-box; /* Implements the border inside the element */
    transform: scale(0.5);
    border-radius: 12px; /* Rounded corners are 2 times */
    top: 0;
    left: 0;
}
Copy the code
  • Advantages: Good compatibility, no side effects, recommended use

Use viewport initial-scale

Implementation principle: set the entire page to be shrunk, and set the user can not zoom the page, and then write 1px page to show the 1px border

<meta name="viewport" content="Width =device-eidth, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no" >
Copy the code
  • Advantages: Can be directly written1px, good compatibility, suitable for use with new projects
  • Disadvantages: can make the page smaller, if it is an old project, need to change the CSS style entirely

4. Achieve 1px through picture simulation

How it works: Since 1px will be rendered as 2px, we can design a 2 × 2px image. If we need to set the top border, make the bottom 1px transparent and the top 1px the color we want, as shown below

@media screen and (-webkit-min-device-pixel-ratio: 2) {.border{ 
        border-top: 1px solid transparent;
        border-image: url(border.png) 2repeat; }}Copy the code
  • Advantages: No advantages
  • Disadvantages: Changing color requires changing pictures, rounded corners blurred

Use box-shadown

box-shadow: 0  -1px 1px -1px # 999.1px  0  1px -1px # 999.0  1px  1px -1px # 999, 
            -1px 0  1px -1px # 999;
Copy the code
  • Advantages: Simple implementation
  • Cons: It’s easy to see shadows, not borders

6. Background-img gradient clipping

How it works: Set the element to 1px and crop the background image

.linear-gradient {
    position: relative;
}
.linear-gradient::after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 1px;
    width: 100%;
    /* background: linear-gradient(180deg, #999, #999 50%, transparent 50%); * /
    background: linear-gradient(180deg, transparent, transparent 50%.# 999 50%);
}
Copy the code
  • Advantages: Simple implementation, no side effects
  • Disadvantages: Can’t set four sides, can’t set rounded corners

7. Implement using SVG

How it works: Because SVG is vector graphics, its 1px physical pixel is 1px

Postcss-write-svg can be used with PostCSS:

@svg border_1px { 
  height: 2px; 
  @rect { 
    fill: var(--color, black); 
    width: 100%; 
    height: 50%; }}.svg { border: 1px solid transparent; border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch; }
Copy the code

The compiled:

.svg { border: 1px solid transparent; border-image: url("data:image/svg+xml; charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }
Copy the code
  • Advantages: simple implementation, can achieve rounded corners,
  • Cons: Need to learnsvggrammar

conclusion

The above method 1 px can click on the link to check: service-ph6ff7lw-1257620930.gz.apigw.tencentcs.com/release/all…

There are many ways to implement 1px:

  1. Write directly0.5 px.
  2. It’s implemented by scaling2pxconvert1px
    • throughThe transform: scale (0.5)
    • throughviewportIn theInitial - scale = 0.5
  3. Through the picture simulation1px
  4. tailoring
    • throughbox-shadown
    • Clipping by gradient percentage
  5. Using SVG

There are two recommended ways to convert 2px to 1px by scaling

The above is the full text, I hope to help you, if there is a mistake, please correct

reference

Mobile 1PX problem solving

Mobile 1PX solution

Tiktok — What you need to know about mobile adaptation

IPhone screen size, resolution and fit

Baidu – the difference between PT and PX in HTML?