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); } } function handleFontSize() { // 设置网页字体为默认大小 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开发常用技巧