在开发的过程中遇到的一些移动端的兼容性问题，以后会陆续的总结增加
- 不让用户选择文本
user-select: none
- 设置select文字的位置，靠右对齐
direction: rtl;
- 去除按钮等元素的一些默认表现,比如屏蔽阴影
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
- 设置placeholder时候 focus时候文字没有隐藏
input:focus::-webkit-input-placeholder{
opacity: 0;
}
- 自定义滚动条
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
width: 0px;
height: 0px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
- input placeholder 默认颜色
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
- ios手机 出现滚动条时滚动不流畅的问题（目前只在ios出现问题）
-webkit-overflow-scrolling: touch;
- 移动端一像素解决方案
//dpr = 2
.thinner-border {
position: relative;
}
.thinner-border:before {
content: '';
position: absolute;
width: 200%;
height: 200%;
border: 1px solid #000;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-o-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
//不同dpr 媒体查询
.content h1:after,
.content h2:after {
border-top: 1px solid #bfbfbf;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform-origin: left bottom;
}
@media only screen and (-webkit-min-device-pixel-ratio:2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
.content h1:after,
.content h2:after {
-webkit-transform:scaleY(0.33333334);
transform: scaleY(0.33333334);
}
}
去哪网的css的Yo框架中也有对1像素边框的处理，可以阅读源码
当然还有一些js的解决方案
- input填入字符会出现黄色
input:-webkit-autofill {
box-shadow: 0 0 0px 1000px white inset !important;
}
- 字体清晰
-webkit-font-smoothing antialiased;
- 点击时有默认颜色
-webkit-tap-highlight-color
