iOS内嵌webview页面

iOS内嵌webview页面制作经验

因为工作中做到iOS内嵌页面，以后也会越来越多地遇到，所以打算总结一下这方面的经验。

切图的时候，不要把文字切到图中

我看到有的同事切图的时候把文字也切到图里，包括普通图和@2x的图。这样做其实很不好，因为：

1. 设计搞中的字体可能跟iOS实际的字体不一样，二者在同一个屏幕出现的时候就会很违和。比如文字用了iOS字体，后面的一个按钮中的文字是微软雅黑，囧。。。
2. 更重要的是，99%的情况下，文字一定会模糊。系统对文字的渲染比对图片的渲染圆滑而智能很多，而且性能也好很多，尽量使用字体。
3. 可以公用图片，少图，app尺寸更小。

不要CSS3和图片拼接

也是看别人的代码里出现的，一个三角+圆角的仿iOS按钮，使用了图片+CSS3，这时候在retina屏上很容易看出模糊+清晰的一个差别，而且图片里的RGB颜色与CSS写定的RGB颜色也有误差。

以@2x为基准开始设计稿

以@2x也就是640px宽创建设计稿时，要注意各种线条要偶数，也就是说，一条1px的线应该改为2px。

两份样式可以写在一起

cssgaga

使用cssgaga的@2x->1倍图功能，自动生成1倍图，然后代码中写定对1倍图的引用，最后cssgaga自动生成对@2x图的媒体查询代码，非常方便。

 

使用移动端专有reset

对于会在远程服务器端维护的页面，应尽可能减少css代码体积，和dom节点的复杂度。

少使用有性能问题的css属性

本文来自：http://yuguo.us/weblog/mobile-slice-font/