Html與手機屏幕自適應

//之前做一個手機網站,用到屏幕自適應與填充,怕忘記了在此做個記錄:


var decpx=document.getElementById("topx").scrollHeight+document.getElementById("buttomx").scrollHeight+document.getElementById("divPlaceholder").scrollHeight;	
	document.getElementById("centerx").style.height = (window.document.body.offsetHeight-decpx)+"px";   
	 var list=document.getElementById("ulx");//獲取檢索範圍
	 var str=list.getElementsByTagName("li");//獲取檢索內容塊
	 for(var i=0;i<str.length;i++)//遍歷內容塊
	   str[i].style.height=(window.document.body.offsetHeight-decpx)+"px";  //設置每個li高度


因爲用到一個嵌入的左右滑動模塊,這個模塊是固定高度的:#divPlaceholder{width: 100%;height: 210px;}

而頂部信息欄和底部按鈕塊也要保持在屏幕頂部和最底部,所以在中間插了一個空的:"centerx"  

由此就要計算這個要多高才能保證底部按鈕模塊一直保持在屏幕底部。之後,不管在什麼分辨率高度的手機上瀏覽的話,底部按鈕模塊一直都在屏幕最底部,最終顯示效果很理想。


這個也算是半個Html與手機屏幕自適應的方法吧。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章