HTML5 How to write a script that supports the iphone touch screen

A general formulation:

JS Code

$ ("#u_obj_id"). Bind (' Touchstart ', function (e) {point
= Hastouch? E.originalevent.touches[0]: E;
Point represents the touch screen
//Some action
})

This allows the JS code to support the touch-screen events of the mobile device.

If the effect is more demanding, you can use Jquery-mobile to implement it. But page behavior also needs to be studied.

Other iphone application code excerpt:

Prohibit the automatic resizing of the text when you rotate the iphone in Safari browser. Adjusts the size of the text when you rotate the Iphone,safari browser. If for some reason you want to block this effect, just use the following CSS declaration.

The WebKit text size adjustment is a WebKit CSS property that allows you to control the adjustment of the text.

HTML code

HTML, body, form, fieldset, p, Div, H1, H2, H3, H4, H5, h6 {-webkit-text-size-adjust:none;}

Since the iphone allows its users to browse the Web page in portrait and landscape mode, you may want to detect how viewers are viewing your Web page.

This JavaScript function can easily detect the current iphone orientation and will be applied to a particular CSS class, which you can define in a CSS style. Note that in this example, the CSS class is added to the id:page_wrapper.

JS Code

Window.onload=function initialload () {
updateorientation ();
}
function Updateorientation () {
var contentType = "Show_";
Switch (window.orientation) {case
0:
contentType + = "normal";
break;
CASE-90:
ContentType + = "right";
break;
Case:
ContentType + = "Left";
break;
Case 180:
ContentType + = "flipped";
break;
Document.getelementbyidx_x ("Page_wrapper"). setattribute ("Class", ContentType);
}

Define Iphone/ipod-specific CSS styles

Sniffers can be useful, but for many reasons, this is not the best way to detect browsers. If you are looking for a more concise way to define CSS styles for Iphoen, you should use the following code. It must be pasted in a regular CSS file.

HTML code

@media screen and (max-device-width:480px) {
}

Auto-hide Tool bar

On small screens, such as the iphone screen, toolbars are sometimes useful, but they also waste a lot of space. If you want the Safari Explorer toolbar to be hidden by default, use the following JavaScript code.

JS Code

Window.addeventlistener (' Load ', function () {
settimeout (scrollto, 0, 0, 1);
}, False);

Use of special links

Do you remember a few years ago "mailto" a kind of link is very common? Prefix the person who automatically opens the default e-mail client. The iphone has launched two similar prefixes, tel and SMS, which may be useful for you. The only thing you have to do to do this is to paste any of the following places into your HTML page.