爱读书的人应该都有这种体会：平装书读得快，会被塞进包里，翻得卷边、染上咖啡渍，但正因为这样，它才更像一本“被真正读完”的书。 精装书则不同。它更缓慢，更有仪式感，适合在睡前或炉火边慢慢品味。读完一本精装书，它依然像新的一样，因此也更受收藏者和书迷偏爱。 其实，你的网站也可以拥有这种“精装感”。不需要复杂的JavaScript，只要一个简单的CSS技巧，就能在iOS Safari上改变网页顶部和底部延伸区域的颜色，让移动端访客感受到一种更细致、更完整的浏览体验。 在iOS Safari中，网页内容会自动延伸到屏幕顶部状态栏后面，以及底部标签栏后面。如果你什么都没有设置，这些延伸出来的区域就会使用 `` 的背景色；如果 `` 没有明确背景色，就会继承 `` 的背景色。而默认情况下，这段区域通常是白色的。 也就是说，很多网站上下两端那条不起眼的白色边缘，其实不是精心设计的，而是Safari默认留下的“毛边”。 想让网站看起来更精致，方法就像给精装书加上彩色书边一样简单：明确设置页面背景色。 ```css html { background-color: #2c3e50; } body { background-color: #f5f0e8; margin: 0; } ``` 这样一来，iOS Safari上下延伸出来的区域，就会显示``或``的背景色，而不是刺眼的白色。配合页面顶部的页头颜色和底部页脚颜色，整个网站会像精装书一样，有了一圈包裹住的“书边”。 如果你希望状态栏区域单独呈现某种品牌色，也可以单独给这个区域设置背景。不过，最稳妥、最简单的做法，仍然是在``上设置一个与网站整体风格相近的背景色，让所有未被内容覆盖的边缘都自然融入页面。 精装书的价值，不只是里面的内容，更在于拿在手里、翻页时的整体体验。网站也一样：用户来你的网站，不应该只是快速抓取一段信息后离开，而应当感受到这个页面是完整、有设计感、值得停留的。 这个小技巧虽然简单，却能给许多每天只在iOS Safari上停留几秒钟的用户，留下一种类似精装书的安静质感。下次用iPhone打开自己的网站时，你会发现，上下边缘不再是泛白的默认底色，而是你亲手挑选的颜色——这个细节，就是网站“高级感”与“随便做做”之间最直观的差别。
热门跟贴