为了使得网页看上去更像native的程序，我们需要对网页进行一些优化

使用iPhone访问本文的测试页面

本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置

为iPhone优化网页，最需要了解的应该是下面这个属性
viewport: 可见窗口

可见窗口在iPhone Safari上和桌面Safari略有不同，iPhone上默认没有滚动条，默认的实际的可见大小在竖屏状态下，如下图是320*356，地址栏占据了60像素的高度，稍后我们有办法将其隐藏，得以使用这宝贵的60像素。

iPhone的Safari在显示传统的web网页时（未做优化的网页），viewport会被设置成显示网页宽度的980像素，即在320*356的大小内显示原网页980像素的内容，做了适当的缩放等调整。

所以我们做网页优化的时候，可以通过设置这个meta属性，更多细节可以参考： “Safari Web Content Guide.pdf”

<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no"/>

width=device-width, //设备宽度

height=device-height, //设备高度

initial-scale=1.0, //初始的缩放比例

user-scalable=no //是否允许用户缩放

小技巧

1. 如何隐藏iPhone Safari的地址栏

设置这个属性(文档里面说有用，但是好像不太成功)

<meta name="apple-mobile-web-app-capable" content="yes" />

还有一种办法，页面加载完成之后滚动窗口，这个确实有效，唯一要注意的是页面高度必须够长，我一般设成device-height就没问题了:

<script type="text/javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

2. 如何设置网页的桌面快捷方式图标

这个其实不算技巧，只是从Apple文档里找到这一项罢了

<link rel="apple-touch-icon" href="apple-touch-icon.png"/>
<link rel="apple-touch-startup-image" href="startup.png"/>

第一行就是设置桌面快捷方式图标的，图标必须是57*57像素的文件，不需要自己做圆角和高亮效果，系统会自动帮你搞定这个
放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标

第二行是设置启动画面（没看到成功效果）

3. 如何为网页设置iPhone的样式

这个是CSS media selector的一点小技巧

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)"
  rel="stylesheet" type="text/css" href="iphone.css"/>
<!--<![endif]-->

4. 如何在网页中检测屏幕的方向

<script type="text/javascript">
function updateOrientation()
{
	var displayStr = "Orientation : ";
	switch(window.orientation)
	{
	case 0:
		displayStr += "Portrait";
		break;
	case -90:
		displayStr += "Landscape (right, screen turned clockwise)";
		break;
	case 90:
		displayStr += "Landscape (left, screen turned counterclockwise)";
		break;
	case 180:
		displayStr += "Portrait (upside-down portrait)";
		break;
	}
	document.getElementById("output").innerHTML = displayStr;
}
</script>
<body onorientationchange="updateOrientation();">

5. 如何在网页中检测当前的位置

<script type="text/javascript">
navigator.geolocation.getCurrentPosition(showMap);
function showMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = latitude;
	document.getElementById("longitude").innerHTML = longitude;
}

//Register for location changes
var watchId = navigator.geolocation.watchPosition(scrollMap,handleError);

function scrollMap(position) {
	latitude = position.coords.latitude;
	longitude = position.coords.longitude;
	document.getElementById("latitude").innerHTML = "scrollMap->"+latitude;
	document.getElementById("longitude").innerHTML = "scrollMap->"+longitude;
}
function handleError(error) {
	document.getElementById("error").innerHTML = error;
}

function buttonClickHandler() {
	// Unregister when the user clicks a button
	navigator.geolocation.clearWatch(watchId);
}

</script>
</head>
<body>
<div id="location">
	latitude:<p id="latitude">null</p>
	longitude:<p id="longitude">null</p>
</div>
<div>
	<input type="button" value="clearWatch" onclick="buttonClickHandler();"/>
</div>
<div id="error"></div>
</body>