Iphone/ipad front-end development skills

Limitations of iPad Development

1. When using Safari on an iPad to browse a webpage on a common website, the webpage needs to be manually zoomed in or down or slide because it is too large, although this kind of slide behavior has been talked about in various announcements at the beginning of the iPad market, we will still find that this is not convenient for a long time, and it does not bring very good feelings to users.
2. Flash is not supported. In iPad Safari without jailbreak, website Flash cannot be displayed, but it can be solved through third-party software, plug-ins, or browsers. However, even if Flash cannot be displayed, you can use HTML5 and CSS3 to achieve the same effect.
3. There is no mouse cursor, which means that the mouse attribute, such as the mouse hover attribute, is impossible.
4. You may find some work ing methods for this, but it will be difficult for your users to work.
The scroll bar does not work as expected. the scroll bar cannot display content filled with excessive partitions. The frame also has the height and width issues. In addition, two finger gestures are required during the rolling process. (We will make a full discussion below)
5. fixed CSS layout is not supported. The position: fixed CSS attribute of the HTML element cannot be correctly displayed, which usually keeps the page on the first screen and cannot be turned down, zoomed in or out.

To develop a mobile website for a specific device, you must first perform device detection. The following describes how to use Javascript to detect the UA of the iPhone/iPod and then turn to the exclusive URL.

Code:

If (navigator. userAgent. match (/iPhone/I) | (navigator. userAgent. match (/iPod/I ))){

If (document. cookie. indexOf ("iphone_redirect = false") =-1 ){

Window. location = "http://www.8mart.cn ";

}

}

Although Javascript can be run on a fruit device, users can still disable it. It will also cause the client to refresh and transmit additional data, so the following is the server side detection and steering:

Code:

If (strstr ($ _ SERVER ['HTTP _ USER_AGENT '], 'iphone') | strstr ($ _ SERVER ['HTTP _ USER_AGENT '], 'ipod ')){

Header ('location: http://www.8mart.cn/iphone ');

Exit ();

}

Set viewpoint and screen width

If no viewpoint is set, the website will be shown as a thumbnail In the viewpoint format. If you develop a website specifically for the iPhone/iPod, this one is very useful and simple. You just need to insert it into the head:

Code:

<Meta name = "viewport" content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0;">

Use the iPhone specification icon

If your user adds your website to the home screen, the iPhone uses the thumbnail of the website as the icon. However, you can provide a self-designed icon, which is certainly better. The image size is 57x57 in png format. The system automatically performs this operation without having to perform rounded corners and reflection on its own. Then add the following line to the head:

Code:

<Rel = "apple-touch-icon" href = "images/youricon.png"/>

The font size is automatically adjusted when the screen is rotated.

-Webkit-text-size-adjust is the private css of webkit:

Code:

Html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust: none ;}

Detects the orientation of a device.

The iPhone can browse Web pages on a horizontal screen. Sometimes you may want to know the handheld status of your device to enhance availability and functionality. The following section of Javascript can determine which direction the device rotates and replace css:

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 90:

ContentType + = "left ";

Break;

Case 180:

ContentType + = "flipped ";

Break;

}

Document. getElementById ("page_wrapper"). setAttribute ("class", contentType );

}

CSS recognized by iPhone

If you do not want to detect devices, you can use CSS media queries to define styles for iPhone/iPod.

Code:

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

CSS3 media Query

For media queries in CSS3, iPhone and iPad are different. With this technology, you can apply different styles to different device grip directions to enhance functions and experience.

The iPhone is detected by the maximum screen width. Yes:

Code:

 

The iPad is a little different. It directly uses the orientation attribute in the media query. Yes:

Code:

 

Then, you only need to define different styles.

Zoom out

Generally, a large image of a website is larger than 480 pixels in width. If you use the code above to limit scaling, the images displayed on the iPhone will obviously exceed the screen. Fortunately, the iPhone has enough functionality. We can use CSS to enable the iPhone to automatically scale down and display large images.

Code:

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

Img {max-width: 100%; height: auto ;}

}

Note that if the original image is very large or there are many images on a page, you 'd better scale it to 480 pixels in width on the server side. The iPhone only needs to scale down to 320 pixels during normal browsing. This will not consume too much traffic and performance.

Hidden toolbar by default

The browser toolbar of the iPhone is located at the top of the page and hidden only after the webpage is rolled. In this way, the page loading is a waste of space, especially when the screen is landscape. We can make it automatically roll up.

Code:

Window. addEventListener ('load', function (){
SetTimeout (scrollTo, 0, 0, 1 );
}, False );

Simulation: hover pseudo class

Because the iPhone does not have a mouse pointer, there is no hover event. The CSS: hover pseudo class is useless. However, the iPhone has a Touch event. onTouchStart is similar to onMouseOver, and onTouchEnd is similar to onMouseOut. So we can use it to simulate hover. Use Javascript:

Code:

Var myLinks = document. getElementsByTagName ('A ');

For (var I = 0; I <myLinks. length; I ++ ){

MyLinks [I]. addEventListener ('touchstart', function () {this. className = "hover" ;}, false );

MyLinks [I]. addEventListener ('touchend', function () {this. className = "" ;}, false );

}

Then, use CSS to increase the hover effect:

Code:

A: hover, a. hover {/* your hover effect */}

In this way, you can design a link more like a button. In addition, this simulation can be used on any element.

Iphone fixed positioning

Code:
 
About floating positioning, after testing, we found that {position: fixed;} cannot be used,
You can change it to {position: absolute;}. You can use the iphone to view the DEMO:
Iphone-fixed-positioning http://uecss.com/demo/jeff/iphone-fixed-positioning/
 
Touch Events
The iPhone uses a touch screen, so it requires a touch screen and an event mechanism when it leaves. Fortunately, the iPhone has done a good job in this area and provided four things for processing touch: touchstart, touchend, touchmove, touchcancel (when the system cancels the touch ).
 
Gestures
It refers to the scaling or rotating effect when two fingers touch the screen. For listening to gestures, the iPhone also has three events: gesturestart, gestureend, and gesturechange.
At the same time, the event parameter has two attributes: scale and rotate. The center value of Scale is 1. If the value is greater than 1, the image is enlarged. If the value is smaller than 1, the image is reduced.
 
 
 
References:
 
IPhone CSS-tips for building iPhone websiteshttp: // csswizardry.com/2010/01/iphone-css-tips-for-building-iphone-websites/
 
IPhone & iPod Detection Using Javascripthttp: // Davy. name/detect-iphone
 
IPhone Development: 12 Tips To Get You Startedhttp: // articles.sitepoint.com/article/iphone-development-12-tips/
 
Tutorial: Building a website for the iphone http: // www. engageinteractive. co. uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
 
Hover pseudo class for the iPhonehttp: // www.evotech.net/blog/2008/12/hover-pseudo doclass-for-the-iphone/
 
Fixed-positioning-on-mobile-safarihttp: // doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
 
Preparing Your Web Content for iPadhttp: // developer.apple.com/safari/library/javastes/tn2010/tn2262/index.html
 
 
From the fate of ing.