7 ways to solve the mobile Retina screen 1px border problem

On a Reina (retina) screen phone, a 1px border that is set with CSS will actually be much thicker than the visual version. In the previous project, the UI told me that the borders in our mobile project were all thicker, and that the UI was really different from what I saw in his design and my screen. There is no way, only in the later version to modify, but to change, you need to know why. So looked up a lot of information, finally understand the problem, and summed up several methods.

Causes the border to become thicker

In fact, the reason is very simple, because the CSS 1px is not equal to the mobile device 1px, these because the different phones have different pixel density. There is a Devicepixelratio property in the Window object that reflects the pixels in the CSS to the pixel ratio of the device.

The official definition of devicepixelratio is the proportion of device physical pixels and device independent pixels, i.e. Devicepixelratio = physical pixels/independent pixels.

6 ways to fix border thickness 1, 0.5px border

In the 2014 WWDC, "Designing a responsive Web experience," Ted O ' Connor talked about the retina
Hairlines "(Retina Thin Line): Only 1 physical pixel borders are displayed on the Retina screen, what should developers do?
They were introduced to IOS 8 and OS X Yosemite are about to support a 0.5px border:

0.5px border

Oh, my God! So easy! Is it true?
This is not enough (WWDC slides are usually "bluffing"), but not much.
The problem is that the Retina screen browser may not recognize the 0.5px border, it will interpret it as 0px without a border. Includes IOS 7 and previous versions, OS X Mavericks and previous versions, and Android devices.

Solution:
The solution is to use JavaScript to detect whether the browser can handle a 0.5px border, and if so, add a class to the HTML tag element.

if (window.devicepixelratio && devicepixelratio >= 2) {  var Testelem = document.createelement (' div ');  TestElem.style.border = '. 5px solid transparent ';  Document.body.appendChild (Testelem);} if (testelem.offsetheight = = 1) {  document.queryselector (' HTML '). Classlist.add (' hairlines ');}  Document.body.removeChild (Testelem);} The script should be inside, and if it runs inside, it needs to wrap $ (document). Ready (function () {})

Then, the very fine border style is easy:

div {  border:1px solid #bbb;}. Hairlines Div {  border-width:0.5px;}

Advantages:

• Simple, no need for too much code.

Disadvantages:

• Cannot be compatible with Android devices, IOS 8 or less.

2, using Border-image to achieve

Prepare a border-image that meets your requirements:

Bottom Border

Style settings:

. border-bottom-1px {  border-width:0 0 1px 0;  -webkit-border-image:url (linenew.png) 0 0 2 0 stretch;  Border-image:url (linenew.png) 0 0 2 0 stretch;}

Above is the border set at the bottom of the border, so the use of the picture is 2px high, the upper 1px color is transparent, the lower 1px uses the visual rules of the border color. If you need border at the bottom and top of the border, you can use the following border-image:

Top and Bottom border

Style settings:

. border-image-1px {  border-width:1px 0;  -webkit-border-image:url (linenew.png) 2 0 stretch;  Border-image:url (linenew.png) 2 0 stretch;}

So far, we have been able to show the effect of 1px border on the iphone. However, we found that this method on the non-Retina screen will appear border phenomenon, so using media query to do some compatibility, style settings are as follows:

. border-image-1px {  border-bottom:1px solid #666;} @media only screen and (-webkit-min-device-pixel-ratio:2) {  . border-image-1px {    border-bottom:none;    border-width:0 0 1px 0;    -webkit-border-image:url (.. /img/linenew.png) 0 0 2 0 stretch;    Border-image:url (.. /img/linenew.png) 0 0 2 0 stretch;}  }

Advantages:

• You can set a single, multiple borders
• Problems with no performance bottlenecks

Disadvantages:

• Change color trouble, need to replace picture
• Rounded corners require special handling, and edges blur

3, using Background-image to achieve

Background-image the same way as border-image, you have to prepare a picture that meets your requirements. The border is then simulated on the background.
Style settings:

. background-image-1px {  background:url (.. /img/line.png) repeat-x left bottom;  -webkit-background-size:100% 1px;  background-size:100% 1px;}

Advantages:

• You can set a single, multiple borders
• Problems with no performance bottlenecks

Disadvantages:

• Change color trouble, need to replace picture
• Rounded corners require special handling, and edges blur

4, multi-background gradient implementation

Similar to the background-image scenario, just replace the picture with the CSS3 gradient. Set 1px gradient background, 50% color, 50% transparent.
Style settings:

. background-gradient-1px {background:linear-gradient (#000, #000 100%, transparent 100%) left/1px 100% no-repeat, Linear-gradient (#000, #000 100%, transparent 100%) right/1px 100% no-repeat, Linear-gradient (#000, #000 100%, TRANSP Arent 100%) top/100% 1px no-repeat, Linear-gradient (#000, #000 100%, transparent 100%) bottom/100% 1px no-repeat}/* or */.background-gradient-1px{background:-webkit-gradient (linear, left top, right bottom, color-stop (0, Transparent) , Color-stop (0, #000), to (#000)) left/1px 100% no-repeat,-webkit-gradient (linear, left top, right bottom, color-stop (0, Transparent), Color-stop (0, #000), to (#000)) right/1px 100% no-repeat,-webkit-gradient (linear, left top, right B Ottom, color-stop (0, Transparent), Color-stop (0, #000), to (#000)) top/100% 1px no-repeat,-webkit-gradient (Linear, le FT top, right bottom, color-stop (0, Transparent), Color-stop (0, #000), to (#000)) bottom/100% 1px no-repeat}

Advantages:

• Single, multiple borders can be implemented
• The color of the border is set freely

Disadvantages:

• A lot of code.
• Rounded corners can't be achieved.
• Multi-background images have compatibility issues

5. Use Box-shadow to simulate the border

Using CSS to achieve 0.5px effect in shadow processing
Style settings:

. box-shadow-1px {  box-shadow:inset 0px-1px 1px-1px #c8c7cc;}

Advantages:

• Low Code Volume
• can meet all scenarios

Disadvantages:

• The border has a shadow and the color becomes lighter

6, viewport + REM implementation

At the same time by setting the REM reference value of the corresponding viewport, this way can be as easy and enjoyable as before to write 1px.
At devicepixelratio = 2 o'clock, the output viewport:

<meta name= "viewport" content= "initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, User-scalable=no" >

At devicepixelratio = 3 o'clock, the output viewport:

<meta name= "viewport" content= "initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, User-scalable=no ">

This compatibility scheme is relatively perfect, suitable for new projects, and old project modification costs are too large.
For this scenario, you can see the "use of flexible to achieve H5 page of the end of the adaptation"
Advantages:

• All scenarios can be met
• A set of code that can be compatible with all basic layouts

Disadvantages:

• Old project changes are too expensive to apply to new projects only

7, Pseudo-class + transform implementation

For the old project, there is no way to be compatible with 1px embarrassing problem, personally think pseudo-class +transform is a more perfect method.
The principle is to remove the original elements of the border, and then use: Before or: After redo border, and transform scale reduction of half, the original element relative positioning, the new border absolute positioning.
Single Border style settings:

. scale-1px{  position:relative;  Border:none;}. scale-1px:after{  content: ";  Position:absolute;  bottom:0;  Background: #000;  width:100%;  height:1px;  -webkit-transform:scaley (0.5);  Transform:scaley (0.5);  -webkit-transform-origin:0 0;  transform-origin:0 0;}

Four Boder style settings:

. scale-1px{  position:relative;  margin-bottom:20px;  Border:none;}. scale-1px:after{  content: ";  Position:absolute;  top:0;  left:0;  border:1px solid #000;  -webkit-box-sizing:border-box;  Box-sizing:border-box;  width:200%;  height:200%;  -webkit-transform:scale (0.5);  Transform:scale (0.5);  -webkit-transform-origin:left top;  Transform-origin:left top;}

It is best to judge before use, combined with JS code, determine whether the Retina screen:

if (window.devicepixelratio && devicepixelratio >= 2) {  document.queryselector (' ul '). ClassName = ' Scale-1px ';}

Advantages:

• All scenarios can be met
• Support Fillet (pseudo class and ontology class all need to add Border-radius)

Disadvantages:

• For elements that already use pseudo-classes (for example, clearfix), multiple layers of nesting may be required

Reference:

• 1px on Retina
• Talk about mobile web Retina 1px border Solution
• How does the mobile device of the retina screen achieve a truly 1px line? 》
• "1px border effect in Retina screen"

Related articles that may be of interest to you

• The JQuery effect "attached source" is very useful in website development
• Share 35 amazing CSS3 animation effects Demo
• Stunning 8 x HTML5 & JavaScript Effects
• Web development in a very practical 10 effects "source Download"
• 12 Classic white-rich jQuery images Carousel Plugin

Original from: 7 Ways to solve the mobile Retina screen 1px border problem

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

7 ways to solve 1px border problems with mobile retina screens