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/