做网站兼容性怎么设置？
这问题问得太实在了。
很多刚入行的兄弟，或者自己折腾建站的朋友，最容易踩的一个坑就是：代码跑通了，电脑上看挺美，结果一到手机上，或者换个浏览器，全乱套了。
我干了15年建站，见过太多老板花大价钱做的网站，因为兼容性没搞好，客户打不开，最后只能打回票。
今天我不讲那些晦涩的技术术语，就聊聊怎么用最笨、也最稳的办法，搞定网站兼容性。
先说个真事。
去年有个做本地家政服务的客户，网站做得花里胡哨，动画满天飞。结果大部分客户是用微信里发的链接打开的，用的是安卓低端机。打开一看，字重叠，按钮点不动。
客户急得跳脚，问我咋办。
我说，第一步，先别搞那些花哨的。
做网站兼容性怎么设置？核心就两点：一是布局要“活”，二是测试要“全”。
第一步，放弃固定像素，拥抱相对单位。
以前我们写代码，喜欢用px，比如宽度写死800px。这在电脑上没问题，但在手机上，屏幕窄啊，800px肯定溢出。
现在主流做法是响应式设计。
用百分比，或者rem、vw这些单位。
比如你的导航栏，别写死宽度，写100%。
图片也要设置最大宽度为100%，高度自动。
这样不管屏幕多大，内容都能自适应缩放手。
这一步做好了，你就解决了80%的布局错乱问题。
第二步，针对不同浏览器，做特殊处理。
这点很多人忽略。
你以为Chrome能看，IE也能看？
天真。
虽然IE现在用得少了，但有些政府网站、传统企业官网，客户可能还在用老版本的浏览器。
这时候，你需要在代码头部加一段meta标签，告诉浏览器用最新的内核渲染页面。
比如：
这行代码虽小，但能救命。
另外，CSS3的新属性，有些老浏览器不支持。
这时候要用polyfill，或者写兼容写法。
比如圆角，不仅要写border-radius，还得加上-webkit-border-radius等前缀。
别嫌麻烦，这是基本功。
第三步，真机测试，别光靠模拟器。
手机模拟器看着像那么回事，但实际触摸体验、字体渲染，跟真机差别很大。
我每次交付项目前，都会拿自己的iPhone、安卓华为、安卓小米，还有家里老人的旧平板，挨个试一遍。
看看字体是不是太小，按钮是不是太密，图片加载是不是太慢。
做网站兼容性怎么设置？其实没有捷径，就是多测。
第四步，性能优化也是兼容性的一部分。
有些网站在电脑上跑得飞快，在3G网络下就转圈圈。
这也是兼容性的一种，叫“网络环境兼容性”。
图片要压缩，代码要精简，能合并的文件就合并。
加载速度慢了，用户直接关页面，你页面再完美有啥用？
最后，给个建议。
别一上来就追求高大上的特效。
先把基础打牢，确保在主流浏览器、主流手机分辨率下，内容清晰、操作流畅。
至于那些极端的、老旧的设备，量力而行。
毕竟，你的目标客户是用最新手机的人，还是用十年前的老人机的人？
搞清楚这个，你就知道精力该花在哪。
建站是个良心活，也是技术活。
兼容性做好了，用户体验上去了，你的网站才算真正“活”了。
如果你还在为网站在不同设备上显示不一致而头疼，或者不知道怎么写响应式代码，别自己瞎琢磨了。
找专业的人做专业的事，能省不少心。
有问题随时留言，咱们一起聊。
