小屏幕下placeholder易被截断是因为input默认宽度仅12–20字符，叠加小屏视口窄及flex的min-width:auto行为；需同时设置width/min-width、box-sizing:border-box和min-width:0三规则才能完整显示。
为什么小屏幕下 placeholder 一定容易被截断
因为 input 默认宽度在移动端（尤其 iOS Safari）通常只有约 12–20 个等宽字符宽，而小屏设备本身视口窄，又常叠加 flex 布局的 min-width: auto 行为，导致长提示如 "Stadt oder Postleitzahl eingeben" 直接溢出裁剪。这不是 placeholder 字符限制，而是渲染层宽度失控。
必须加的三个 CSS 规则才能让 placeholder 完整显示
只设 width 不够，必须组合生效：
-
width: 100%或明确的min-width（比如min-width: 20ch），确保容器有可计算宽度 -
box-sizing: border-box，防止padding和border推宽实际占用 -
min-width: 0（对 flex item / grid item 尤其关键），否则浏览器会阻止内容收缩折行或缩窄
例如：
.form-input {
width: 100%;
box-sizing: border-box;
min-width: 0;
}
移动端 placeholder 垂直居中异常的修复点
iOS Safari 对 placeholder 的 baseline 计算很敏感，仅靠 padding 容易偏上或被裁顶：
- 显式设置
height和line-height相等（如都设为44px），比只用padding更稳 - 避免
padding-top单独撑高，它会让 placeholder 渲染位置“飘” - 在 iOS 真机上打开「辅助功能 → 显示缩放」测试，确认文字是否完整可见
::placeholder 样式在小屏上失效的常见原因
不是写错了，而是兼容性没兜住：
- 必须按顺序写四套规则：
::-webkit-input-placeholder、::-moz-placeholder、::-ms-input-placeholder、::placeholder，漏一套就可能在某机型变灰或消失 - Firefox 默认给
::-moz-placeholder加了opacity: 0.54，必须每套都显式写opacity: 1 - 别用
rgba()设颜色，Safari 对 alpha 解析不稳定；改用color: #666; opacity: 0.6 -
font-family必须显式声明，不能依赖继承，否则可能 fallback 到等宽字体，视觉变窄
复杂点在于：你得同时控制宽度、高度、伪元素样式、flex 行为——少一个环节，小屏上就可能只看到半截文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
