关于移动端H5页面中1px边框的解决方法

段落一：背景及问题 如今，移动端 H5 页面已经是不可忽视的一部分，在开发 H5 页面过程中我们时常会遇到了一个紧迫问题：在移动端手机屏幕上显示 1px 边框的时候，由于各大厂商的高分辨率屏幕显示差异，会出现 1px 的边框在某些手机上会显得比较粗，而在某些手机上会看上去消失不见的问题，使用border-width: 1px;的解决方法看上去在视觉效果上并不可取。 段落二：解决方案 一种解决方案是使用 viewport 实现，即看到的1个像素，采用2个甚至更多的物理像素来呈现，这里主要介绍在视网膜屏幕上大小的手机，可以这样设置： ``` ``` 在常规的设置 viewport 的基础上，加上了一个minimal-ui参数，这个参数可以使用户点击时隐藏浏览器的地址栏以及其他浏览器的按钮，如果不加的话，那么在一些手机上就只会显示默认的“完成”“回退”按钮，浏览器的地址栏会一直保持在页面顶部，使用这个参数就解决了这个问题。 然后需要使用 CSS3 规范之一的 transform + scale 的属性值的组合，将样式代码改为： ``` transform: scaleY(0.5); -webkit-transform: scaleY(0.5); ``` 这就会使边框变细，但是在某些手机上会失效，所以同时还需要把这个样式附加在伪元素上，而最后结合使用伪元素:before和:after来实现： ``` .h-box{ position:relative; overflow:hidden; border-top: 1px solid #ccc; padding-top:10px; } .h-box:before, .h-box:after { content:" "; display:table; } .h-box:after { clear:both; } .h-box:before { position:absolute; top:-1px; left:-1px; height:1px; width:100%; border-top:1px solid #ccc; transform: scaleY(0.5); -webkit-transform: scaleY(0.5); } ``` 这样就可以轻松实现在移动端手机屏幕上显示 1px 边框的效果了。 段落三：代码示例说明 这里解释一下代码的用途，首先框架需要使用Flex布局，是为了考虑到在移动端布局时可以更加快捷方便，使用::before和::after伪元素生成两个占位元素，便于下方的主体内容排版，可以用伪元素的padding来撑开其高度，接下来就是设置伪元素的border-top与实体元素的border-top重合，从而实现边框；而伪元素的高度为实体元素的高度减去1px，这样就可以让边框显示出来，并且通过采用transform属性实现边框变细。 段落四：结论 在移动端H5页面设备上显示1px边框的问题不言而喻，根据个人实际体验最为实用的解决方法还是上述所述的方法，通过伪元素配合相关CSS属性来实现细边框效果，同时采用viewport实现即看到的1个像素，采用2个甚至更多的物理像素来呈现，这个方式的精髓在于依靠CSS3的新特性，与原生元素保持一致，并且整个过程中代码量非常小巧，且兼容性较高，个人认为除了viewport以外，其他技巧都是放大功能，这点大家需要注意。