移动端 h5

最新推荐文章于 2025-07-10 15:29:06 发布

weixin_30752699

最新推荐文章于 2025-07-10 15:29:06 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Running00/p/11291064.html

本文分享了针对移动端UI的优化策略，包括取消点击高亮、iphonex适配技巧、文字不可选、图片不可操作、input框样式调整等，特别强调了placeholder的展示问题及fixed布局的替代方案。

取消点击时候的透明区域
-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;
}