h5 默认为移动端页面_总结移动端H5开发常用技巧——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。

下面介绍最常用的方法

/* 底边框 */ .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。

解决方案

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

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

}

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

body { overflow-y: hidden;

} .wrapper { overflow-y: auto;

}

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