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

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

不让用户选择文本

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