記錄手機端h5頁面碰到的一些問題

關於input光標在手機端偏移

問題根本：不要使用line-height垂直居中。
解決方法：可直接定義height，而後高度由上下padding值撐開。

移動端清除input光標

ios input 添加 readonly unselectable=」on」 屬性，光標依舊還在

input聚焦時立刻讓它失焦，代碼

$('input[readonly]').on('focus', function() {
    $(this).trigger('blur');
});

親測在蘋果手機可行

div不知道高寬的狀況下居中

支持微信瀏覽器的translate寫法 其餘瀏覽器須要加上-ms- -moz- -webkit- -o-

.parentDiv{
  position:relative;
}
.childDiv{
  width:100px;
  height:100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

手機端彈框背景的透明黑底背景樣式

.maskin{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
}

css實現單行、多行顯示省略號

//單行
div{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

css實現圖片正方形加載

在vue中能夠使用內聯樣式循環img :style="{backgroundImage: 'url('+ img +')'}"

url-div {
   width:100px;
   height:100px;
   background-image: url();
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
}

移動端1px問題

.border-1px {
    position: relative;
}
.border-1px:after {
    position: absolute;
    content: '';
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    border-bottom: 1px solid #666;
}

移動端字體設置

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;

}

移動端meta設置

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

碰到問題還會記錄