開發Internet Explorer Mobile 6相關程式手記

來源:互聯網
上載者:User

 

我們知道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消耗。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.