我們知道Web前端開發,花在相容瀏覽器上的工作量不小。
沒想到一個網頁要相容IE Mobile 6工作量相當不小。
這裡我不得不讚揚一下“Opera Mobile”,效能和PC版相容性都很好。
我們先來看看IE Mobile 6這個舞台有哪些限制。
1、不支援position:absolute樣式
<html>
<body>
<div style="width:100px;height:100px;background:Red;"></div>
<div style="width:100px;height:100px;background:Green;position:absolute;left:50px;top:50px;"></div>
</body>
</html>
PC效果:
Mobile效果:
一些重疊效果就需要重新設計
2、不支援動態賦值事件
<html>
<body>
<input id="idBtn" type="button" value="hello"/>
<script type="text/javascript">
function addEventHandler(target, type, func) {
if (target.addEventListener)
target.addEventListener(type, func, false);
else if (target.attachEvent)
target.attachEvent("on" + type, func);
}
document.getElementById("idBtn").onclick = function() {
alert("zswang 路過。");
};
//保證賦值了。
alert(document.getElementById("idBtn").onclick);
addEventHandler(document.getElementById("idBtn"), "click", function() {
alert("感謝cctv!");
});
</script>
</body>
</html>
兩種方式監聽點擊事件在Mobile中失敗
看來只有用最原始的方法<input type="button" value="hello" onclick="alert('囧');"/>
另外,innerHTML中產生的元素也能通過這方法響應事件
<html>
<body>
<div id="idDiv"></div>
<script type="text/javascript">
document.getElementById("idDiv").innerHTML = "<input type=/"button/" value=/"test/" onclick=/"alert('囧');/"/>";
</script>
</body>
</html>
3、Ajax獲得Response.ContentType為"text/plain"的頁面時xmlhttp.responseText為空白。
解決:.NET ashx檔案預設響應類型是"text/plain"需修改為"text/html"
4、介面效能
如果操作具有圖片背景的元素過多(40個以上),更新介面會很慢會出現指令碼逾時的現象,這時候可以先隱藏父容器,更新完樣式再恢複顯示。
function updateAll () {
$("back").style.display = "none";
for (var i = 0; i < 100; i++)
this.update(i);
$("back").style.display = "";
};
背景樣式記得設定no-repeat;
.blank{background:url(/Images/blank.gif) no-repeat
;}
預設為repeat-填充模式,取消填充模式可以降低介面繪製的cpu消耗。