记录手机端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" />

碰到问题还会记录

秒客网