移动端 h5

  • 取消点击时候的透明区域
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  • iphonex 适配
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  • 文字不能选择
    user-select: none;
  • 图片不能操作
    pointer-events: none;
  • outline: none; 去掉input foucs态 input 框样式
  • input placeholder 样式修改
input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #cccccc;
}

input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cccccc;
}

input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cccccc;
}

input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #cccccc;
}

  • 移动端 ios input placeholder 展示不全 line-height: normal; placeholder 的字体大小要小于input 否则会展示不全

  • 有输入框相关的页面不要用fixed,改成absolute

  • align-items: center; // 不能垂直居中 加, line-height: normal;

  • placeholder //字体要小于input 的字体 否则会被挡住部分展示不全

原文地址:https://www.cnblogs.com/Running00/p/11291064.html