input value与placeholder垂直居中
情况分析
在移动端input value与placeholder同时垂直居中情况分析
案例机型,IOS为iphone6 v10.1.1,Android为Galaxy Note3 Lite 4G v4.3
- input不设置height与line-height
移动端IOS value与placeholder稍稍偏下
移动端Android placeholder偏下,value稍稍偏上
- input设置height与line-height同样的高度
移动端IOS value与placeholder都同时垂直居中了,但是当height过高,line-height也会很高,超过了input光标默认高度后,line-height的高度会成为光标高度,并且placeholder严重偏上
移动端Android placeholder垂直居中,value偏上,但是当height过高,line-height也会很高,,placeholder会严重偏上
- input设置height高度与line-height为normal
移动端IOS value垂直居中,placeholder稍稍偏下
移动端Android value与placeholder都同时偏下
- input设置height高度与line-height为normal,设置placeholder line-height
placeholder line-height值大概是input font-size的1.3倍向上取整
移动端IOS value与placeholder都同时垂直居中了
移动端Android placeholder垂直居中,value稍稍偏下
设备兼容
| 设备 | 版本 | 问题 |
|---|---|---|
| iPhone5C | 8.1.2 | 兼容 |
| iPhone5C | 10.3.1 | 兼容 |
| iPhone5S | 8.3 | 兼容 |
| iPhoneSE | 11.0 | 兼容 |
| iPhone6 | 10.1.1 | 兼容 |
| iPhone6S | 10.3.2 | 兼容 |
| iPhone7P | 10.3.2 | 兼容 |
| iPad | 10.3.1 | 兼容 |
| 小米2S | 4.1.1 | placeholder稍稍偏上 |
| 小米MIX | 6.0.1 | placeholder稍稍偏上 |
| 红米Note2 | 5.0.2 | |
| 红米Note3 | 6.0.1 | |
| 华为Mete8 | 7.0 | |
| 华为TAG AL00 | 5.1 | |
| Galaxy Note3 Lite 4G | 4.3 | 兼容 |
| Vivo X5SL | 4.4.4 | 兼容 |
| MEIZU MX5 | 5.0.1 | |
| OPPO R9TM | 5.1 | 兼容 |
| OPPO R7S | 4.4.4 | 兼容 |
对情况二,height和line-heigh设置成一样时,单独做分析
案例机型,IOS为iphone6 v10.1.1,Android为Galaxy Note3 Lite 4G v4.3
分析在不同的font-size下,height和line-height为多少,可垂直居中
一、 IOS
二、 Android
三、 分析结果
在以下情况下,input value与placeholder同时垂直居中,有些会有一些轻微的偏移,影响不大
| font-size | height | line-height |
|---|---|---|
| 12px | 16px | 16px |
| 13px | 17px | 17px |
| 14px | 20px | 20px |
| 15px | 21px | 21px |
| 16px | 22px | 22px |