Home > Industries > Internet
We know that front-end web development requires a lot of work on compatible browsers.
I didn't expect a webpage to be compatible with IE Mobile 6, and the workload was quite small.
I have to praise opera mobile for its excellent performance and compatibility with the PC version.
Let's take a look at the limitations on IE Mobile 6.
1. The position: absolute style is not supported.
<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 effect:
Mobile effect:
Some overlapping effects need to be re-designed
2. Dynamic assignment events are not supported.
<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 passed. ");
};
// Ensure that the value is assigned.
Alert (document. getelementbyid ("idbtn"). onclick );
Addeventhandler (document. getelementbyid ("idbtn"), "click", function (){
Alert ("thanks to CCTV! ");
});
</SCRIPT>
</Body>
</Html>
Failed to listen for click events in mobile in two ways
It seems that only the original method <input type = "button" value = "hello" onclick = "alert ('handler');"/>
In addition, the elements generated in innerhtml can also respond to events using this method.
<HTML>
<Body>
<Div id = "iddiv"> </div>
<SCRIPT type = "text/JavaScript">
Document. getelementbyid ("iddiv "). innerhtml = "<input type =/" button/"value =/" test/"onclick =/" alert ('handler');/"/> ";
</SCRIPT>
</Body>
</Html>
3. XMLHTTP. responsetext is empty when Ajax returns a page with response. contenttype as "text/plain.
Solution: the default response type of the. NET ashx file is "text/plain", which must be changed to "text/html"
4. interface performance
If there are too many elements (more than 40) with an image background, the update interface will be slow and the script times out. At this time, you can hide the parent container, update the style, and restore the display.
Function updateall (){
$ ("Back"). style. Display = "NONE ";
For (VAR I = 0; I <100; I ++)
This. Update (I );
$ ("Back"). style. Display = "";
};
Set no-Repeat for the background style;
. Blank {Background: URL (/images/blk.gif) No-repeat
;}
The default value is repeat-fill mode. Canceling the fill mode can reduce the CPU usage of the interface.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
