关于移动端默认样式的小随笔

1.移动端webview中默认样式

---

->整体样式默认样式清除

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; }

默认缩放

body { width: 100%; padding: 0px; margin: 0px; font-family: "微软雅黑" background: #F8F8F8; } 

body默认会有8px的margin导致页面在手机上会有灰色边界出现，当出现这种情况是大概率是因为此原因，另外的原因可能在页面的样式使用百分比宽度和固定宽度px结合使用的时导致页面宽度超过100% ，造成页面可以左右活动。此时需要仔细检查页面样式调整百分比使得页面合适

->按钮默认样式清空

input[type="button"], 

input[type="reset"],

input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

->选择框默认样式

input[type="checkbox"],

input[type="radio"] {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding: 0;

}

input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

height: auto;

}

input[type="search"] {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

-webkit-appearance: textfield;

}

input[type="search"]::-webkit-search-cancel-button,

input[type="search"]::-webkit-search-decoration {

-webkit-appearance: none;

}

->输入框默认样式

input[type="text"]{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-appearance: none; }

在safari内核中点击输入框时有黑色的背景一闪而过，在这里将其highlight-color设置为透明就可以避免此情况

input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {

color: #e5e5e5;}

input:-moz-placeholder, textarea:-moz-placeholder {

color: #e5e5e5; }

input::-moz-placeholder, textarea::-moz-placeholder {

color: #e5e5e5; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

color: #e5e5e5; }

输入框中默认提示 placeholder的样式设置