做网站最怕什么？不是代码写不出来，而是明明看着挺完美，一打开预览界面，字体乱飞、图片错位，甚至直接白屏。这种挫败感，做这一行谁没经历过？今天不扯那些虚头巴脑的理论，就聊聊怎么快速、准确地预览刚做的单页网站，顺便避避坑。
先说个真事儿。上周帮一个做本地生活的小老板搭了个单页，用的是那种流行的响应式模板。他在后台点预览，手机上看没问题，电脑上看也没问题。结果他拿去给客户演示，客户拿着iPad一刷，好家伙，导航栏直接掉到底部去了，按钮也点不动。客户当场脸就黑了，说这网站是不是没做完。其实代码没毛病，是浏览器缓存和分辨率兼容的问题。这种时候，光靠后台那个简陋的预览框根本看不出来。
所以，刚做的单页网站怎么预览？第一步，别信后台的默认预览。那个预览窗口通常是个阉割版的浏览器，很多CSS样式和JS脚本加载不全。你得自己搞个本地环境。如果你用的是WordPress或者Typecho这类CMS，装个插件，比如WP Local Docker或者直接用XAMPP把项目拉下来，在本地跑起来。本地预览的好处是，你能看到真实的加载速度，还有控制台里的报错信息。
记得有次我调试一个电商单页，后台预览一切正常，本地一跑，控制台全是红色的报错。原来是某个第三方广告插件的脚本冲突，导致整个页面布局崩塌。要是只看后台预览，这坑能埋半年。所以，本地预览是必须有的，哪怕你只是把HTML和CSS文件拖进Chrome浏览器里打开，也比后台强。
第二步，真机测试，别只靠模拟器。现在的浏览器开发者工具虽然能模拟各种手机型号，但那是模拟，不是真实。触摸事件的灵敏度、屏幕像素密度、甚至电池电量对性能的影响，模拟器都测不出来。我一般会把刚做好的网站部署到测试服务器上，然后用自己的iPhone、安卓机，甚至家里那台老旧的Windows平板去试。
有一次，一个客户说他的网站在iPhone 6上打不开。我查了半天代码，发现是某个CSS3属性在旧版WebKit内核里不支持。后来改成兼容写法，问题解决了。这种细节，模拟器根本提示不了。所以，刚做的单页网站怎么预览？答案就是：多设备、多浏览器、真实网络环境。
第三步，别忽视加载速度。单页网站的核心就是快。如果预览的时候加载超过3秒，用户早就关掉了。你可以用Google PageSpeed Insights或者Lighthouse跑一下分。如果分数低于80，那说明你的图片没压缩，代码没合并，或者字体加载太慢。我有个习惯，每次预览前，先把图片转成WebP格式，能省一半的流量。这招虽然老土，但真的管用。
最后，分享个野路子。如果你实在不想搞本地环境，也不想部署测试服务器，那就用浏览器的“无痕模式”打开你的预览链接。无痕模式不会加载你之前缓存的插件和扩展，能更接近普通用户的体验。有时候，你以为是代码问题，其实是某个浏览器插件在捣鬼。无痕模式下，如果页面正常，那大概率是你的环境有问题；如果还是不行，那才是代码的锅。
做这行久了，你会发现，预览不仅仅是看页面长什么样，更是看它在各种极端情况下的表现。别嫌麻烦，多试几次，总能在用户发现问题之前，把坑填上。毕竟，客户不会给你第二次机会，第一次印象定生死。
总之，刚做的单页网站怎么预览？别偷懒，本地跑、真机测、无痕看，这三步走下来，基本能排除90%的隐患。剩下的10%，靠经验，也靠运气。希望这些土办法能帮到你，少走点弯路。
