Mobile end Border 1 pixels problem and solution

Why mobile 1px is getting thicker

Why the mobile side of the CSS inside wrote 1px, actually looks more than 1px thick. In fact, the reason is very good understanding: the meaning of these 2 ' px ' is not the same. The header of the mobile HTML will always have a sentence

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >

This sentence defines the width of the viewport of this page as the device width, both the initial scale value and the maximum zoom value are 1, and the user scaling is prohibited. Viewport popular is that the browser can be used to display the area of the page, this area may be larger than the screen.

According to this article http://www.cnblogs.com/2050/p/3877280.html analysis of the mobile phone there is a perfect adaptation of the ideal viewport, the resolution of a large number of mobile phone's ideal viewport width may be the same, The purpose of this is to ensure that the same CSS appears in the same way on different screens, and the meta is actually set the width of the ideal viewport.

The actual example: Iphone3 and iphone4 screen width is 320px,640px, but their ideal viewport width is 320px, set the device width, 320px width of the elements can be filled with 100% full screen width. Different phone ideal viewport width is not the same, the common has 320px, 360px, 384px. This value of the iphone series is 320px before 6, and the benefit of controlling viewport is that a set of CSS can fit multiple models.

People who understand should understand why 1px is thicker, viewport settings and screen physical resolution are proportional rather than identical. The Mobile Window object has a Devicepixelratio property that represents the ratio of the physical pixel of the device to the CSS pixel, which is 2 or 3 on the retina's iphone, and the 1px length in the CSS maps to the physical pixel as long as 2px or 3px.

1PX Solutions- use decimals to write PX values

IOS8 has been supported with a fractional PX value, media query corresponding to Devicepixelratio has a query value-webkit-min-device-pixel-ratio, CSS can be written like this

If you use Less/sass, you just add 1 sentences mixin

Cons: Android and iOS do not work, this may be the standard wording of the future, now do not expect

{ Border:}{    . Border {border:}{    . Border {border :}}

1PX Solutions- Border-image

Such 1 pictures of 6x6, 9 Gongge to fill border-image, so that the element's 4 border width is only 1px

@media screen and (-webkit-min-device-pixel-ratio:2) {     . border{         Border: 1px solid transparent;         Border-image: url (border.gif) 2 repeat;    } }

Pictures can be used gif, PNG, base64 a variety of formats, above is the upper and lower four border of the wording, need a single border as long as the definition of a single border border, the code is more intuitive., Border-image compatibility:

Disadvantage: For the fillet style, to enlarge the picture to a rounded corner can also meet the needs, but this virtually increases the width of the border, there are a variety of border color or change the time of the trouble

1px solution-:before,: After and transform

The Frozenui rounded border is used in this way to build 1 pseudo-elements, enlarge it to twice times, width of the border to 1px, and then zoom to 50% with transform.

Note that <input type= "button" > is not: Before,: after pseudo-element

Advantages: In fact, not only rounded corners, other borders can also be done

Cons: Code is also very large, occupy the pseudo-elements, easy to cause conflict

. Radius-border{position:relative;}@media screen and (-webkit-min-device-pixel-ratio:2){. Radius-border:before{content: "";pointer-events:None;/*Prevent click Triggering*/box-sizing:Border-box;position:Absolute;width:200%;Height:200%; Left:0;Top:0;Border-radius:8px;Border:1px solid #999;-webkit-transform (Scale (0.5)); -webkit-transform-origin:0 0;Transform (Scale (0.5)); Transform-origin:0 0; }}

Mobile end Border 1 pixels problem and solution