摘要：
CSS篇0.5px细线移动端H5项目越来越多，设计师对于UI的要求也越来越高，比如1px的边框。在高清屏下，移动端的1px会很粗。主要是跟一个东西有关，DPR设备像素比，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。目前主流的屏幕DPR=2,或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css像素只能是0.5。
CSS 篇
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。
下面介绍最常用的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <style>body{padding:300px; }.border{width:300px;border-bottom:1px solid red; } /*底边框 */.b-border{width:300px;position:relative; }.b-border:before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:red;transform:scaleY(0.5);-webkit-transform:scaleY(0.5);transform-origin:0 0;-webkit-transform-orgin:0 0; } /*上边框 */.t-border{width:300px;position:relative; }.t-border::before{content:'';position:absolute;left:0;top:0;width:100%;height:1px;background:red;transform:scaleY(0.5);-webkit-transform:scaleY(0.5);transform-origin:0 0;-webkit-transform-orgin:0 0; } /*左边框 */.l-border{height:30px;position:relative; }.l-border::before{content:'';position:absolute;left:0;top:0;width:1px;height:100%;background:red;transform:scaleX(0.5);-webkit-transform:scaleX(0.5);transform-origin:0 0;-webkit-transform-origin:0 0 ; } /*右边框 */.r-border{height:30px;position:relative; }.r-border::before{content:'';position:absolute;right:0;top:0;width:1px;height:100%;background:red;transform:scaleX(0.5);-webkit-transform:scaleX(0.5);transform-origin:0 0;-webkit-transform-origin:0 0; } </style> </head> <body> <div>1px边框:</div> <br/> <div class="border"></div> <br/> <div>0.5px边框:</div> <br/> <div>底边框:</div> <br/> <div class="b-border"></div> <br/> <div>上边框:</div> <br/> <div class="t-border"></div> <br/> <div>左边框:</div> <br/> <div class="l-border"></div> <br/> <div>右边框:</div> <br/> <div class="r-border"></div> <br/> </body> </html>
效果如下：
屏蔽用户选择
禁止用户选择页面中的文字或者图片
div {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select: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; }
用户设置字号放大或者缩小导致页面布局错误
设置字体禁止缩放
/*ios */body {-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important;-moz-text-size-adjust:100% !important; }
/*Android */ <script> //android禁止微信浏览器调整字体大小 if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else{ if(document.addEventListener) { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); } else if(document.attachEvent) { document.attachEvent("WeixinJSBridgeReady", handleFontSize); document.attachEvent("onWeixinJSBridgeReady", handleFontSize); } } functionhandleFontSize() { //设置网页字体为默认大小 WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0}); //重写设置网页字体大小的事件 WeixinJSBridge.on('menu:setfont', function() { WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0}); }); } </script>
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; }
2、设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body {overflow-y:hidden; }.wrapper {overflow-y:auto; }
JS 篇
iOS 上拉边界下拉出现空白
手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。
在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。
解决方案
document.body.addEventListener( 'touchmove', function(e) { if (e._isScroller) return //阻止默认事件 e.preventDefault() }, { passive: false} )
参考文章： 总结移动端H5开发常用技巧