网站上线别只看电脑端排版，这五个移动端适配点不做，手机打开全乱套

新手做网站，只在电脑大屏上看排版，觉得整整齐齐就上线，结果用户用手机打开，文字挤成一团、图片拉伸变形，体验特别差。其实移动端只要做几个基础适配点，体验立刻就好。第一，页面一定要加viewport的meta标签，告诉浏览器用设备宽度渲染，别把电脑端页面缩小塞到手机屏幕里，文字小到看不清；第二，轮播图、文章封面图加object-fit: cover，不然图片被容器拉伸变形，盘子拉的又长又扁，看着奇怪；第三，交互按钮最小做48px见方，留够间距，用户用手指点，太小的按钮根本点不准，经常误触；第四，别做一进来就全屏自动弹的背景音乐，用户在公共场合打开，音乐突然响，直接吓一跳，要听让用户自己点手动按钮；第五，正文文字最小16px，行高1.5倍，别用12px的小字，手机上看着费眼。

我之前做美食站，没做适配，手机上图片全变形、按钮点不准，跳出率80%，改完这几个点，跳出率直接降到30%，用户停留时间涨了一倍多。现在80%的用户都是用手机打开网站，别只顾着电脑端好看，移动端体验做好了，才能留住人。