0.5px细线

移动端 H5 项目越来越多，设计师对于 UI 的要求也越来越高，比如 1px 的边框。在高清屏下，移动端的 1px 会很粗。

那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

下面介绍最常用的方法

/* 底边框 */ .b-border { position: relative;
} .b-border:before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #d9d9d9;
  -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
} /* 上边框 */ .t-border { position: relative;
} .t-border:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #d9d9d9;
  -webkit-transform: scaleY(0.5); transform: scaleY(0.5);
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
} /* 右边框 */ .r-border { position: relative;
} .r-border:before { content: ''; position: absolute; right: 0; bottom: 0; width: 1px; height: 100%; background: #d9d9d9;
  -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
} /* 左边框 */ .l-border { position: relative;
} .l-border:before { content: ''; position: absolute; left: 0; bottom: 0; width: 1px; height: 100%; background: #d9d9d9;
  -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
  -webkit-transform-origin: 0 0; transform-origin: 0 0;
} /* 四条边 */ .setBorderAll { position: relative;
  &:after { content: ' '; position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: left top; box-sizing: border-box; border: 1px solid #e5e5e5; border-radius: 4px;
  }
}

屏蔽用户选择

禁止用户选择页面中的文字或者图片

div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}

清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

div { -webkit-appearance: none;
}

如何禁止保存或拷贝图像

代码如下

img { -webkit-touch-callout: none;
}

输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #c7c7c7;
} input:-moz-placeholder, textarea:-moz-placeholder { color: #c7c7c7;
} input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #c7c7c7;
}

用户设置字号放大或者缩小导致页面布局错误

设置字体禁止缩放

body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important;
}

android系统中元素被点击时产生边框

部分android系统点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样。去除代码如下

a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-user-modify:read-write-plaintext-only; 
}

iOS 滑动不流畅

ios 手机上下滑动页面会产生卡顿，手指离开页面，页面立即停止运动。整体表现就是滑动不流畅，没有滑动惯性。 iOS 5.0 以及之后的版本，滑动有定义有两个值 auto 和 touch，默认值为 auto。

解决方案

1. 在滚动容器上增加滚动 touch 方法

.wrapper { -webkit-overflow-scrolling: touch;
}

1. 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。

body { overflow-y: hidden;
} .wrapper { overflow-y: auto;
}

原文链接：https://segmentfault.com/a/1190000021767889