Develop iPhone/iPad websites

IPhone/iPadThe exception is fierce. Here we will list some of the collected development skills for reference in the project, as shown below:

IPhone/iPod Detection

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.

If((Navigator.Useragent.Match(/IPhone/I)) | (Navigator.Useragent.Match(/IPod/I))) {If (Document.Cookie.Indexof("Iphone_redirect = false") = -1) {Window.Location = Http://m.example.com";}}

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:

If(Strstr($ _ Server['Http _ user_agent'],'Iphone') |Strstr($ _ Server['Http _ user_agent'],'Ipod')) {Header('Location: http://yoursite.com/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:

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

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

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:

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.

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

Zoom out

Generally, a large image of a website is larger than 480 pixels in width.CodeWith limited scaling, these images are displayed on the iPhone obviously beyond the screen. Fortunately, the iPhone has enough functionality. We can use CSS to enable the iPhone to automatically scale down and display large images.

@ 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.

Window.Addeventlistener('Load', Function() {SetTimeout(Scrollto, 0, 0, 1);}, False);

Use special links

Needless to say:

<A href = "Tel: 12345654321"> call me </a> <a href = "SMS: 12345654321"> send a text message </a>

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:

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:

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

Regarding floating positioning, we found that{Position: fixed;}Cannot be used,
You can change it{Position: absolute;}You can use the iPhone to view the demo: iPhone-fixed-positioning.

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