iphone、ipad Web开发小技巧(知识)

原文：http://pzling.com/2011/02/iphone-mobile-web-development-tips/

Feb.18.2011 , Tagged : ipad, iphone

iphone、ipad都水果家的，区别也不是很大(别和我提屏幕!!!)，所以放一起不作过多区分，基本都通用。资料都网上收集来的，很多我也还没条件测试，可能有些知识点已经更新了。

如何隐藏iPhone Safari的地址栏

使用meta标签，看一些资料说的，不过我在iphone4下测试没反应，不清楚iphone3是否有效或者是有什么限制。

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

第二个方法就是通过JS处理。原理就是当我们往下滚动时，地址栏会往上收起，所以我们重围一下默认位置就可以了。也因为是使用系统自身的特性，当内容小于可视区域时(没有滚动条)，地址栏是不能隐藏的。

window.addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
window.scrollTo(0,1);
}

不同的方向对应不同的样式表

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设置可视窗的大小

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
/*width - viewport的宽度 height - viewport的高度*/
/*initial-scale - 初始的缩放比例*/
/*minimum-scale - 允许用户缩放到的最小比例*/
/*maximum-scale - 允许用户缩放到的最大比例*/
/*user-scalable - 用户是否可以手动缩放*/

这里提一下机械人(android)家的关于user-scalable的问题，2.1有效，但2.2是无效的

设置网页的桌面快捷方式图标

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

第一行是设置桌面快捷方式图标的，没有sizes属性默认57*57像素的图片，圆角和高亮效果系统会自动帮你搞定，放在网页根目录会作用于下面的全部网页，当然也可以为每个页面设置单独的图标。

第二行是设置启动画面。

相关资料

单独给iphone设置样式

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

相关资料

特殊链接

当你浏览一个有电话号码的页面时，可以直接按号码就可以打出电话，这时电话号码自动变成链接，当然它们遵循电话号码的格式，但有时你可能要手工创建一个电话号码链接，这时你可以使用tel:前缀(URI模式)，如：

<a href="tel:03545770051">海健</a>
<a href="sms:03545770051">短信</a>

在网页中检测屏幕的方向

switch(window.orientation){
case 0:
break;
case 90:
break;
case -90:
break;
case 180:
break;
}

手势事件(guesture)

在iPhone上，手势是两个手指的行为：缩放(放大和缩小)和旋转。iPhone支持如下几种手势事件：

gesturestart

gestureend

gesturechange

下面的例子中我们将监听gesturechange事件，然后使用webkitTransform样式属性缩放和旋转一个div，像往常一样，事件监听器接收event对象参数，event对象包含以下属性：

event.scale ： 不缩放时值为1，缩小时值小于1，放大时值大于1

event.rotate ：旋转的角度

window.addEventListener('load', function() {
var b = document.getElementById('box'),
bstyle = b.style;
b.addEventListener('gesturechange', function(event) {
event.preventDefault();
bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
'rotate('+ event.rotation + 'deg)';
}, false);
}, false);

其它小知识点

iphone内置了一个调试控制台；

每个静态资源(*.html,*.css,*.js etc) < 10M ；

超过25K的资源不会被缓存(gzip前)；

5秒钟的javascript执行时间 [更多资料]

-webkit-text-size-adjust设置页面文字尺寸，默认为auto，建议直接设置为none；

-webkit-tap-highlight-color 设置手指触发链接是的颜色

更多开发资料，请查看Apple Developer