并不是加了meta标签，网站就会自适应手机屏幕了，还需要更改一些样式。
你图片上显示搜索框的宽度是568px，但是页面的宽度只有375（iPhone X的页面显示宽度），所以肯定会超出去，发生显示不全的情况
这种情况你可以使用media标签来做自适应
@media only screen and (max-width: 400px){.search{width:300px}
}
上面代码的意思是当页面宽度小于400px的时候 就让.search的宽度变成300px。你可以吧上面的代码加到你的css里面看一下效果
不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，例如16px的话就要16/11.25这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px
}
}
@media only screen and (max-width: 960px) {
html, body {
font-size: 15px
}
}
@media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px
}
}
@media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px
}
}
@media only screen and (max-width: 640px) {
html, body {
font-size: 10px
}
}
如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。
纯手打，望采纳~
