手機網頁, 網頁設計

手機網頁教學-「Retina高解析手機網頁」影像不再模糊不清

梅干 2012/09/17
梅問題-手機網頁教學-Retina高解手機網頁製作影像不再模糊不清
  早期在作網頁時,只要把IE搞定後,就算All Pass了,但隨著瀏覽器大戰下,現在IE不再有絕對的優勢,使得身為網頁設計人員,電腦中安裝七、八個瀏覽器是很合情合理的,好不容把這些瀏覽器都搞定後,現在又多了行動裝置,而行動裝置除了平台不同外,現在連解析度也是五花八門,再加上iPhone的Retina,讓畫面解析變更高,影像更細緻,而這也苦了網頁設計人員,當用傳統的方式作好後,卻會發現到在高解析的手機中,影像卻是糊的,明明就是1:1,影像也放大,即使把解析改成300也一樣,研究了半天才知道,原來要從影像尺寸下手,再搭配CSS與jQ的外掛,就可實現高解的手機網頁,現在就一塊來看看吧!

準備素材:
#圖像:
圖片的部分,需準備二種尺寸,比方logo為100×100像素,則需再製作一個二倍大的影像200×200像素,並命名為-2x
梅問題-手機網頁教學-Retina高解手機網頁製作影像不再模糊不清
#外掛: jQuery.retina

針對網頁中圖片:
#放到<head>~<head>中
<script src="jquery-1.8.1.min.js"></script><script src="jquery.retina.js"></script><script type="text/javascript">
	$(document).ready(function() {
		$('.retina').retina();
	});
</script>

#html:
這時jQuery會自動判斷,當是高解時,會自動將圖片換成-2x的高解圖片,並壓縮在指定的大小裡。
<img src="logo.png" width="160" height="80" class="retina" />

針對網頁中CSS背景圖片:
#放到<head>~<head>中
.retinaDiv
{
	width:160px; 
	height:80px; 
	background:url(logo.png) no-repeat;
	clear:both; 
	margin-bottom:10px;
}

/* Retina圖片CSS放在這區塊中 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2)
{
    .retinaDiv 
	{
    	background: url(logo-2x.png);
		background-size:160px 80px;
    }
}

#html:
當為高解析度的手機時,就會自動讀取@media中的CSS。
<div class="retinaDiv"></div>

結果預覽:
當在高解析的裝置下,像是iPhone4s、iPhone4、iPod touch4,就會看到圖片依然保有, 高解析的影像,影像不再糊糊的。
梅問題-手機網頁教學-Retina高解手機網頁製作影像不再模糊不清
[範例預覽] [範例下載]