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