10条小代码开发iPhone友好的网站
2010-06-22 19:10:00 来源:WEB开发网如果要针对iPhone/iPod Touch开发移动网站,以下十条小代码几乎肯定是需要用到的,方便又有效。
侦测iPhone/iPod
开发特定设备的移动网站,首先要做的就是设备侦测了。下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL。
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
}
虽然Javascript是可以在水果设备上运行的,但是用户还是可以禁用。它也会造成客户端刷新和额外的数据传输,所以下面是服务器端侦测和转向:
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}
设置viewpoint和屏幕等宽
如果不设置viewpoint,网站在viewpoint就会显示成缩略形式。如果你专门为iPhone/iPod开发网站,这一条很有用,而且很简单,只需要插入到head里就可以:
使用iPhone规格图标
如果你的用户将你的网站添加到home screen,iPhone会使用网站的缩略图作为图标。然而你可以提供一个自己设计的图标,这样当然更好。图片是57×57大小,png格式。不需要自己做圆角和反光,系统会自动完成这些工作。然后将下面这条加入head中:
阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust是webkit的私有css:
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}
侦测设备旋转方向
iPhone可以在横屏状态下浏览网页,有时候你会想知道用户设备的手持状态来增强可用性和功能。下面一段Javascript可以判断出设备向哪个方向旋转,并且替换css:
window.onload = function initialLoad() {updateOrientation();}
- ››开发Android 日历教程
- ››开发学院总结 Win 8实用技巧大全
- ››开发学院原创教程:把win8的IE10放桌面上方法(非...
- ››iphone图片拉伸的几种方法
- ››iphone正则表达式的简单使用
- ››iPhone开发Unresolved Symbols CAKeyframeAnimati...
- ››IPhone开发-“此证书是由未知颁发机构签名”解决方...
- ››IPhone开发-整合私钥和证书,生成.p12文件
- ››iPhone应用开发-UIPickerView选取器详解
- ››iphone 获取屏幕的宽度和高度
- ››iPhone读取工程包中的二进制文件
- ››iPhone新手机 不挂YouTube APP
更多精彩
赞助商链接