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

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

很多新手做网站，觉得响应式适配是很复杂的事，其实把这几个基础点做了，大部分移动端的糟心问题就解决了，不用写复杂的媒体查询。我之前做的美食站，一开始没做适配，手机上图片全变形、按钮点不准，跳出率80%，改完这几个点，跳出率直接降到30%，用户停留时间涨了一倍多。做网站别只顾着电脑端好看，现在80%的用户都是用手机打开，移动端体验做好了，才能留住人。