iOS implements several 0.5px methods, Android devices are also practical, Android and iOS implement thin border

Determine the iOS version, set a global style name hairlines, by using the style name to add styles to different versions of iOS, iOS version of the different for the 0.5px display difference is very large, the same device also shows a variety of effects.
Android does not need to judge the version, you can skip the JS judgment.

<script type= "Text/javascript" >
//js in head area .if(/IP (HONE|OD|AD)/. Test (navigator.useragent)) {      varv = (navigator.appversion). Match (/os (\d+) _ (\d+) _? ( \d+)?/), Version= parseint (v[1], 10); if(Version >= 8){
iOS 8 or later Document.documentElement.classList.add (' Hairlines ')      }      if(Version >= 9) {Document.documentElement.classList.add (' Hairlines2 ')      }    }   </script> CSS styles can be written like this:. Hairlines. go-rt{border-Bottom:none;} make 1px border thin line by pseudo-class, border border set to none;

/*** the width and height of the pseudo-element by 200% to be covered with the div widths and heights ***/

1, set the pseudo-elements of the border implementation of thin 0.5px

Disadvantage: The child elements of the defined element are also automatically added to the pseudo-class line. So you need to be careful when you use it.

. Hairlines. Gray-btn:before{

 content:"; Width:200%; padding:3px; Height:200%; border:1px solid #ccc; Position:absolute; Top:0; Left: 0; -webkit-box-sizing:border-Box; Box-sizing:border-box; -webkit-transform:scale (0.5); Transform:scale (0.5); -webkit-transform-origin:0 0; Transform-origin:0 0;}

2, through the height of the pseudo-element to achieve 0.5px. Hairlines. Mine-pic:before{content:'; Width:200%; Position:absolute; Top:0; Left: 0; Right:0; -webkit-transform:scale (0.5); Transform:scale (0.5); -webkit-transform-origin:0 0; Transform-origin:0 0; height:1px; Background-color: #ccc; }

3, through the shadow implementation of iOS o.5px, some devices will have a shadow

#button {    background-image:linear-gradient (180deg, #ccc, #ccc 50%, Transparent 50%),  linear -gradient (270deg, #ccc, #ccc 50%, Transparent 50%),  linear-gradient (0deg, #ccc, #ccc 50%, Transparent 50%),  linear-gradient (90deg, #ccc, #ccc 50%, transparent 50%);  Background-size:100% 1px,0px 100%, 100% 1px, 0px 100%;  Background-repeat:no-repeat;  Background-position:top, right top,  bottom, left top;  padding:10px;   0;  Overflow:hidden;    

iOS implements several 0.5px methods, Android devices are also practical, Android and iOS implement thin border