使用原生input模拟器样式正常，但是真机上 input框溢出

目录

一、问题

二、解决方法

三、总结

---

tiips:如嫌繁琐，直接移步总结即可！

一、问题

1.使用原生input写了一个搜索框，在模拟器和pc上一切正常。但是打包放到手机上，样式就有问题：这个搜索框的布局是正常的，但是聚焦到input上，就可以看到input明显溢出了！

二、解决方法

1.真是奇怪，我也没有写什么奇怪的东西呀。pc端和移动端的模拟器都是没有问题的。

布局就是简单的flex布局。input 框 flex:1,其余图标自适应。怎么到移动端就有问题呢？

 1）代码如下：

2.只能一个个试试到底哪个样式有问题。

3.发现注释了 最外层父盒子的 display:flex，竟然不溢出了。

4.但是吧，我确实需要用flex布局，让子元素一行显示，这样的修改显然不科学。。。

5.最后的最后发现，只需要在 input上 加上样式 width:100%；就好了。甚至flex:1`都不需要！！！！！

6.问题是解决了，但是原因真不知道。。。。。

三、总结

1.移动端怎么会有这么多奇怪的问题呢？

2.移动端确实需要在真机上测试才靠谱！

3.移动端input溢出：尝试设置input width:100%;

4.猜测可能是手机上有内置的样式，所以我们不设置的时候，使用了默认的样式，导致了最终的样式和预期不一致。（有大佬知道原因，欢迎评论区告知，非常感谢！）

/*

希望对你有帮助！

如有错误，欢迎指正，非常感谢！

*/