IPhone Safari web development experience

Document directory

• 1. useragent
• 2. iPhone (iPod Touch) Detection Method
• 3. How to customize CSS for iPhone
• 4. How to understand the iPhone viewport
• 5. Change Direction
• 6. Specific direction Style
• 7. rounded corners
• 8. Touch)
• 9. guesture)
• 10. special links

1. useragent

IPhone useragent:

Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_0_1 like Mac OS X; ZH-CN) applewebkit/528.18 (khtml, like gecko) version/4.0 mobile/7a400 Safari/528.16

Accept: Application/XML, application/XHTML + XML, text/html; q = 0.9, text/plain; q = 0.8, image/PNG, */*; q = 0.5

IPod TouchUseragent:

Mozilla/5.0 (iPod; U; CPU iPhone OS 3_0 like Mac OS X; ZH-CN) applewebkit/528.18 (khtml, like gecko) version/4.0 mobile/7a341 Safari/528.16

Accept: Application/XML, application/XHTML + XML, text/html; q = 0.9, text/plain; q = 0.8, image/PNG, */*; q = 0.5

2. iPhone (iPod Touch) Detection Method

Determine whether the UA contains the "iPhone" string. Take the PHP code as an example:

1	if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone') {IPhone customization module}

3. How to customize CSS for iPhone

The most obvious difference between an iPhone and a PC is that the iPhone has a small screen. You can use the media attribute of the link label to limit the application scope of CSS. Considering that IE ignores the media feature of the link label, we must use the conditional annotations supported by IE to block ie when defining CSS styles. The sample code is as follows:

1	<!--[if !IE]>-->

2	<link rel="stylesheet" href="iphone-only.css" type="text/css"media="only screen and (max-device-width: 480px)" />

3	<!--<![endif]-->

Use max-device-width: Px (iPhone lie down width) to shield the PC; use only screen to shield the screen reading device. In this way, the CSS style defined in iPhone-only takes effect only on the iPhone.

4. How to understand the iPhone viewport

By default, the iPhone will render the page like a browser on a PC (the default page width is 980px, which can be set through the width attribute of viewport ), and then scaled to adapt to the iPhone's small screen (the scaling ratio can be set through minimum-scale and maxmum-scale). Therefore, when the iPhone looks at this page, it feels that the font is relatively small, it is also vague and must be zoomed in to see the truth. This is why the page words I customized for China Unicom are so small, because I didn't set the viewport. The following code demonstrates how to set the viewport:

1	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />

Viewport has the following attributes:

• Width: Set the viewport width. That is, the iPhone initially simulates the width of the PC browser. Then, the iPhone scales the page displayed in the width to the iPhone screen. After the width = device-width is set, no scaling will be performed, because the width is exactly the same as that of the iPhone (provided that the scaling ratio is not set ).
• Minimum-scale and maximum-scale: controls the scale allowed by the user.
• User-scalable: Indicates whether to allow page scaling. The values include yes and no. If it is set to no, page scaling is not allowed.
• Initial-scale: Set the scaling ratio when the user first sees the page.

5. Change Direction

The iPhone supports gravity sensing. The iPhone can normally browse the page either horizontally or vertically. With the iPhone's extended events, this "gravity sensing" can be captured ". You can use JavaScript to obtain the properties of window. orientation. It contains the following values:

• 0-normal vertical direction (the start button is below)
• -90-horizontal orientation after vertical clockwise rotation (Start button on the left)
• 90-horizontal orientation after vertical clockwise rotation (Start button on the right)
• 180-currently not supported, but it should be vertical rotation (the start button is above)

When you tilt the device, you can use the orientationchange event to execute an action. The following is a simple example. A warning prompt is displayed whenever the direction changes. The window is displayed. orientation Value:

1	window.onorientationchange = function() {

2	alert(window.orientation);

3

}

6. Specific direction Style

Sometimes you may need to use styles to format your content in the direction. There are three simple steps:

1. In our tag, add a class name to the body unit (you can use portrait and landscape)
2. In our style sheet, specify different content styles for body. portrait and body. landscape, as well as its child elements.
3. When the direction changes, use JavaScript to update the class attribute value of the body unit.

Therefore, the first step is to add a default class name, such:

1	body.portrait p {

2	color: red;

3

}

4

5	body.landscape p {

6	color: blue;

7

}

Then add the style:

1	body.portrait p {

2	color: red;

3

}

4

5	body.landscape p {

6	color: blue;

7

}

The last is Javascript. We need to use:

1. A load event listener that sets the initial class name
2. An orientationchange event listener
3. A function that exchanges class names when an orientationchange event occurs.

Let's take a look at the event listener:

1	window.addEventListener('load', setOrientation, false);

2	window.addEventListener('orientationchange', setOrientation, false);

The following is the setorientation function that changes the class name on the body unit:

1	function setOrientation() {

2	var orient = Math.abs(window.orientation) === 90 ? 'landscape' :'portrait';

3	var cl = document.body.className;

4	cl = cl.replace(/portrait|landscape/, orient);

5	document.body.className = cl;

6

}

7. rounded corners

You can use the rounded corner method in your familiar desktop browser. If you only want safari, you can also use the-WebKit-border-radius CSS extension, firefox has a similar-moz-border-radius, but it is displayed as a simple box in IE and opera. The sample CSS style is as follows:

1

.box {

2	-webkit-border-radius: 5px;

3	-moz-border-radius: 5px;

4	background: #ddd;

5	border: 1px solid #aaa;

6

}

8. Touch)

When using the iPhone, you can use your fingers instead of the mouse. the coolest thing is that you can touch multiple points. The mouse event on the iPhone is replaced by a touch event, including:

• Touchstart
• Touchend
• Touchmove
• Touchcancel

When you issue these events, the event listener will receive an event object. The event object has some important familiarity, such:

• Touches: a set of touch objects. Each finger on the touch screen has one. The touch object has pagex and Pagey attributes, including the coordinates of the touch on the page.
• Targettouches: similar to touches, but it only registers the touch of the target element, rather than the whole page.

The following example shows a simple implementation of drag and drop. We place a box on the blank page and drag it. What you need to do is to subscribe to the touchmove event, then, move your finger to update the position of the box, for example:

01	window.addEventListener('load', function() {

02	var b = document.getElementById('box'),

03	xbox = b.offsetWidth / 2, // half the box width

04	ybox = b.offsetHeight / 2, // half the box height

05	bstyle = b.style; // cached access to the style object

06

07	b.addEventListener('touchmove', function(event) {

08	event.preventDefault(); // the default behaviour is scrolling

09	bstyle.left = event.targetTouches[0].pageX - xbox + 'px';

10	bstyle.top = event.targetTouches[0].pageY - ybox + 'px';

11	}, false);

12	}, false);

9. guesture)

On the iPhone, gestures are the behavior of two fingers: Zoom (zoom in and out) and rotate. The iPhone supports the following gesture events:

• Gesturestart
• Gestureend
• Gesturechange

In the following example, we will listen to the gesturechange event, and then use the webkittransform style attribute to scale and rotate a div. As usual, the event listener receives event object parameters. The event object contains the following attributes:

• Event. scale: the zoom-in value is 1, the zoom-in value is smaller than 1, and the zoom-in value is greater than 1.
• Event. Rotate: Rotation Angle

The code is very similar to the previous touch-drag code:

1	window.addEventListener('load', function() {

2	var b = document.getElementById('box'),

3	bstyle = b.style;

4	b.addEventListener('gesturechange', function(event) {

5	event.preventDefault();

6	bstyle.webkitTransform = 'scale(' + event.scale + ') ' +

7	'rotate('+ event.rotation + 'deg)';

8	}, false);

9	}, false);

10. special links

When you browse a page with a phone number, you can simply press the number to make the phone number. Then the phone number is automatically changed to a link. Of course, they follow the phone number format, but sometimes you may need to manually create a phone number link, then you can use Tel: prefix (URI mode), such:

1	<a href="tel:03545770051"> Hai Jian </a>

If it is SMS text, you can use SMS: prefix to start the text message application of the iPhone:

1	<a href="sms:03545770051"> SMS </a>

There are also some special links for other special features on the iPhone, such:

• Link to iTunes store to start iTunes. You can search for a link in iTunes store, right-click the search result, and select "Copy iTunes store URL ", another way is to use the iTunes link maker, which generates HTML tags, including a good title and iTunes graphic buttons.
• Link to Google Maps to start the Maps application.
• The YouTube link will launch the local YouTube app, not the YouTube site.
• Link to the email address will start the mail application.