In the development of mobile web pages, in order to make the size used in CSS consistent with the design draft, REM unit and lib-flexible are usually used to achieve mobile adaptation. On IOS devices, flexibs. js dynamically adjusts the width and scale of the viewport according to the resolution of the device to achieve this goal.

However, many Android phones now also have high-resolution screens, and some buttons and lists with 1px border will be particularly thick. Flexible. Js only deals with IOS phones, so We need to deal with Android phones by ourselves.

JS processing

First, you can use window.devicepixelRatio to get the device’s pixel ratio and then style the HTML tag accordingly.

function retina () { // High resolution screen processing
    if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS')! = =- 1) return; // IOS will zoom, not process
    var classNames = [];
    var pixelRatio = window.devicePixelRatio || 1;
    classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
    if (pixelRatio >= 2) {
        classNames.push('retina');
    }

    var html = document.getElementsByTagName('html') [0];

    classNames.forEach(function (className) {
        html.classList.add(className);
    });
}Copy the code

This allows us to add special styling to screens of different resolutions using HTML. Pixel-ratio -2.

1px for a single edge

Since the AndorID can’t set a border of 0.5px pixels, you need to simulate the border with a fake element. First make the fake element 1px high and then use transform: scale(.5) to reduce the corresponding size. The specific implementation code is as follows:

.item {
    position: relative;
    &:before{
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        bottom: auto;
        right: auto;
        width: 1px;
        height: 100%;
        background-color: @color;
        display: block;
        z-index: 1;
        html.pixel-ratio-2 & {
          .transform(scaleX(0.5));
        }
        html.pixel-ratio-3 & {
          .transform(scaleX(0.33)); }}}Copy the code

Then for the border in different directions, just jump to the pseudo element’s position and zoom position. The implementation comes from Framework7

Border button 1px scheme

In addition to the direction of the border, there is a full border button, if not done, it will look very thick, but the pseudo-elements only before and after obviously the unilateral scheme does not work, so you have to use other schemes.

Again, I’m going to draw the border with the fake element and then I’m going to zoom it out to make it thinner. First we draw four edges with the fake elements, then adjust the width and height to 200%, and finally reduce it by 50%. Since the border is 1px, it will not change with the change of width and height, so when we reduce the border, it will also become smaller.

.block-line {
    position: relative;
    border: 1px solid # 000;  // In normal case
    html.pixel-ratio-2 & {
        border-color: rgba(0.0.0.0);
        &:before {
            content: "";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid # 000;
            transform: scale(0.5);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none; }}html.pixel-ratio-3 & {
        border-color: rgba(0.0.0.0);
        &:before {
            content: "";
            width: 300%;
            height: 300%;
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid # 000;
            transform: scale(0.33);
            transform-origin: 0 0;
            padding: 1px;
            box-sizing: border-box;
            pointer-events: none; }}}Copy the code

This solution comes from the Frozen UI

Related articles

  • Summary of two approaches to mobile Web adaptation
  • Mobile Terminal Adaptation Scheme (PART 1)
  • Mobile Terminal Adaptation Scheme (Part 2)