为了使得网页看上去更像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>
