haojii » iPhone http://www.haojii.com 一个专注于技术的IT男 Thu, 19 Apr 2012 07:58:49 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 为iPhone优化网页的技巧 http://www.haojii.com/2010/02/optimize-web-pages-for-iphone/ http://www.haojii.com/2010/02/optimize-web-pages-for-iphone/#comments Sun, 07 Feb 2010 10:05:57 +0000 Jacky http://www.haojii.com/?p=213 继续阅读 →
其他文章：
CSS分割背景图片的技巧
炫酷CSS超链接按钮一
A post from iPhone
Second post from iPhone
无觅
]]> 为了使得网页看上去更像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>
其他文章：
CSS分割背景图片的技巧
炫酷CSS超链接按钮一
A post from iPhone
Second post from iPhone
无觅
]]> http://www.haojii.com/2010/02/optimize-web-pages-for-iphone/feed/ 2 Second post from iPhone http://www.haojii.com/2010/02/second-post-from-iphone/ http://www.haojii.com/2010/02/second-post-from-iphone/#comments Mon, 01 Feb 2010 11:58:40 +0000 Jacky http://www.haojii.com/2010/02/second-post-from-iphone/ 其他文章： A post from iPhone 为iPhone优化网页的技巧 阴差阳错 分享治打嗝秘方一则 无觅 ]]> 1.Google的语音搜索酷毙了，准确率相当高，要是所有要输入的地方都能用语音输入效率多高啊！看图！
2.Wordpress的iPhone客户端很好很强大，还可以发图片，看图！
3.iPhone截图使用home+顶部关机键

本文全部内容都在iPhone上搞定！

其他文章：
A post from iPhone
为iPhone优化网页的技巧
阴差阳错
分享治打嗝秘方一则
无觅
]]> http://www.haojii.com/2010/02/second-post-from-iphone/feed/ 0 A post from iPhone http://www.haojii.com/2010/01/a-post-from-iphone/ http://www.haojii.com/2010/01/a-post-from-iphone/#comments Sun, 31 Jan 2010 07:39:08 +0000 Jacky http://www.haojii.com/?p=197 其他文章： Second post from iPhone 为iPhone优化网页的技巧 阴差阳错 分享治打嗝秘方一则 无觅 ]]> 测试用iphone发个帖子，
后台的richtext editor不能用，
wordpress的网页显示还可以，
form表单输入也没什么问题，
bug也有使用ajax取数据的地方有时候不响应，
滚动条显示不出来，safari挂过一次！
iphone输入法的联想和搜狗比则显得功能不够强劲
有空再写个iphone的使用感受！

其他文章：
Second post from iPhone
为iPhone优化网页的技巧
阴差阳错
分享治打嗝秘方一则
无觅
]]> http://www.haojii.com/2010/01/a-post-from-iphone/feed/ 0