css-移动端css的一些兼容问题

在开发的过程中遇到的一些移动端的兼容性问题，以后会陆续的总结增加

1. 不让用户选择文本

user-select: none

2. 设置select文字的位置，靠右对齐

direction: rtl;

3. 去除按钮等元素的一些默认表现,比如屏蔽阴影

appearance:none;
-moz-appearance:none;
-webkit-appearance:none;

4. 设置placeholder时候 focus时候文字没有隐藏

input:focus::-webkit-input-placeholder{
 opacity: 0;
}

5. 自定义滚动条

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-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;
}

6. input placeholder 默认颜色

&::-moz-placeholder           { color: @color; } // Firefox
&:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder  { color: @color; } // Safari and Chrome

7. ios手机 出现滚动条时滚动不流畅的问题（目前只在ios出现问题）

-webkit-overflow-scrolling: touch;

8. 移动端一像素解决方案

//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的解决方案

9. input填入字符会出现黄色

input:-webkit-autofill { 
box-shadow: 0 0 0px 1000px white inset !important;
}

10. 字体清晰

-webkit-font-smoothing antialiased;

11. 点击时有默认颜色

-webkit-tap-highlight-color