移動開發總結

標籤：

http://www.zhangxinxu.com/wordpress/2012/08/mobile-wap-page-knowledge-share/

瀏覽器與圖片顯示

豎著狀態，如iPhone4, 寬度像素640，而一般Symbian S60寬度320. 由於為了閱讀體驗，iPhone4和Symbian預設瀏覽器的布局視區寬度都是320像素，因此iphone4的裝置像素比devicePixelRatio為2, Symbian為1.

這所導致的問題就是實際320像素寬的圖片在Symbian上是正常比例寬度滿屏顯示；而在iPhone4上，也是寬度滿屏，但圖片實際兩倍展開了，因此，如果圖片本身品質不高，就會有模糊的展開——視網膜螢幕的iPhone反而效果不好。

如果您不計成本，可以製作兩套圖片，分別使用語高清螢幕以及普通螢幕。不過，上文“裝置像素比devicePixelRatio”也提到過，有些裝置的像素比是2.25, 以後可能還會出現像素比3, 因此，這種多尺寸圖片，開發維護成本高，且不一定長壽的方法是否值得推廣值得商榷。

.icon {  background-image: url(example.png); /* 普通尺寸圖片 */  background-size: 200px 300px;  height: 300px;  width: 200px;}@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),only screen and (-moz-min-device-pixel-ratio: 1.5),only screen and (-o-min-device-pixel-ratio: 3/2),only screen and (min-device-pixel-ratio: 1.5) {  .icon {    background-image: url([email protected]); /* 2倍尺寸圖片 */  }}

如果你想省事，可以使用高清版本的圖片，對於320像素寬度，裝置像素比為1的裝置，使用1/2尺寸壓縮限制，或者使用background-size進行一般尺寸顯示。舉例而言，我們使用640像素寬度的圖片，使用CSS(eg. img { width: 320px; })限死成300像素寬。類似Nokia塞班機子有浪費，但是，iPhone以及最近的Android裝置像顯示很OK.

如果想相容OSS瀏覽器，background-size慎用。

當然，最好的方法就是避免使用圖片，尤其底紋，裝飾性表徵圖，邊邊角角的圖形等。我們可以使用CSS3 font-face圖形產生，或者SVG向量圖片，或者Canvas繪圖。如果值考慮智能機，上面的技術都是很OK的。

 

移動開發總結