IPhone/iPad front-end development skills

ArticleDirectory

• Limitations of iPad Development
• IPad User Detection: User Agent)
• Use W3C standard website Technology

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 slide behavior was cited in various announcements at the beginning of the iPad's launch, however, after a long time, we will still find that this is not convenient, and it does not bring very good feelings to users.
2. Flash 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. No mouse cursor

   This means that the mouse property, such as the hover property, is impossible.

   You may find some work und for this, but it will be difficult to get to your users for how to work.

4. 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 not supported

   The position: Fixed CSS attribute of the HTML element cannot be correctly displayed, which usually causes the page to stay on the first screen and cannot be turned down or zoomed in or out.

IPad User Detection: User Agent)

As mobile devices access the Internet, many websites detect browser types on the client, primarily by using the user agent. If mobile browsing is detected, the website may be redirected, allows users to browse the specific versions of mobile devices. In the past, we used to refer to mobile devices, mainly mobile phones and other terminals. Now, iPad is also included in the ranks of mobile terminal devices, but it has a 9.7 "large screen, the Safari browser of the iPad brings a close view experience on PC computers. Therefore, the website pages corresponding to the iPad must be different from those of other mobile devices. The differences between iPad and website pages are mainly based on the user agent of the browser.

IPad Safari user agent described in iPhone OS 3.2 SDK beta 3Code:

 
Mozilla/5.0 (IPAD; U; cpu OS 3_2 like Mac OS X; en-US) applewebkit/531.21.10 (khtml, like gecko) version/4.0.4 mobile/7b334b Safari/531.21.10
 

The user agent code of iPad safari contains the words "mobile" and "iPad", excluding the words "iPhone ". This must be noted. If the previous versions of the website do not differentiate the access to mobile devices, you need to modify them to prevent the corresponding device from returning an incorrect version.

Simulate access through the iPad Browser

If you cannot test the webpage through an iPad or iPhone simulator, you can still perform the test in the following way:

2. Use Mac OS X or Windows safari to act as a simulator

    

   Safari menu-> preference settings-> advanced-> select "Development menu" on the menu bar. This menu item "development" appears on the menu bar.

   Choose "development"> "User Agent"> "Others". In the displayed dialog box, paste the preceding user agent code and click "OK". Then, you can use safari to verify whether the page is suitable for iPad display.

4. Use Google Chrome as a simulator

   Enter the following command line:

   Chrome.exe -- User-Agent = "Mozilla/5.0 (IPAD; U; cpu OS 3_2_2 like Mac OS X; en-US) applewebkit/531.21.10 (khtml, like gecko) version/4.0.4 mobile/7b500 Safari/531.21.10"

6. Javascript detects the user agent of the iPad and then redirects to the URL of the corresponding version.

   If (navigator. useragent. match (/iPhone/I) | (navigator. useragent. match (/iPad/I) {If (document. cookie. indexof ("iphone_redirect = false") =-1) {window. location = "http://ipad.www.opensoce.com ";}}

8. PHP script detection User Agent

   If (strstr ($ _ server ['HTTP _ user_agent '], 'iphone') | strstr ($ _ server ['HTTP _ user_agent '], 'ipad ')) {header ('location: http://ipad.www.opensoce.com '); exit ();}

10. Apache detection and redirection

    Rewritecond % {http_user_agent} ^ iPad rewriterule ^ Index \... * $ ipad.html [l] rewritecond % {http_user_agent} ^ iPhone rewriterule ^ Index \. * $ iphone.html [l]

12. Nginx detection and redirection

    If ($ http_user_agent ~ * IPad) {proxy_pass http://ipad.www.opensoce.com;} if ($ http_user_agent ~ * IPhone) {proxy_pass http://iphone.www.opensoce.com ;}

Use W3C standard website Technology

The Safari browser for iPad and iPhone does not support plug-ins and flash.

Menus and navigation using plug-in technology (Controls) are not displayed in iPad or iPhone browsers.

Audio and video embedded using the plug-in will not be played. You can use the & lt; audio> and <video> tags of HTML5 to publish audio and video content. For more information, see htmlmediaelement, htmlvideoelement, and htmlaudioelement development in the safari Dom.

In the past, you may need plug-ins to express the animation content. In the iPad and iPhone browsers, you can directly use JavaScript + css3 to create animations. Css3 began to develop towards modularization, such as the box model, list module, background and border. With css3, you can directly create a rounded table. Previously, only images or VML technology can be used.

For HTML5 and css3, the earliest and successful applications in China are Netease's three mailboxes (mail.163.com; mail.126.com; www.yeah.net). When you enter the above address on the iPad, it will be switched to the iPad to adapt to the version, and users will feel very good. HTML5 has many advantages in terms of standardization and speed. According to data provided by Netease, the speed of email receiving and writing in this version is improved by 50%. In addition, there is also an advantage in that the reduction of code greatly improves the efficiency of mailbox server processing, providing a more powerful platform for future function expansion.

The future and goal of HTML5/css3 is to improve the network experience of everyone. Introduction to HTML5/css3:

 
* Use css3 gradient, font shadow, and circle boxes with borders-these are especially useful for menu bar and simple website designers. * If you want to display a video, use the HTML5 video player instead of Flash (obviously it cannot work ). * Use HTML5 to create offlineProgramData is stored offline. * Various practical tutorials are available everywhere. I used them when developing my iPad network programs. Google them to get idea.
 

If no plug-in support is available for the safari test on a general computer, choose preference Settings> Security> and deselect the plug-in enable option box,

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 iPhoneDemo: 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 websites

IPhone & iPod detection using JavaScript

IPhone development: 12 tips to get you started

Tutorial: Building a website for the iPhone

Hover pseudo class for the iPhone

Fixed-positioning-on-mobile-Safari

Preparing your web content for iPad