移动端 h5

2024-08-27 15:41:20

取消点击时候的透明区域

-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 的字体否则会被挡住部分展示不全

最新文章

热门文章