开发iPhone版校友录
作者：波希米亚 来源：B3 bohemia 时间：2009-08-31 16:29:00
这几天忙个合作，开发iPhone版校友录。用了很久的iPhone，为它量身定制一套页面还是头一次，好在限制不是很多，会写html基本呈现就不成问题了，外加注意一些特殊处理方法，一个iPhone版网页就搞定了。
写在前面的话：
iPhone屏幕分辨率是320×480（160dpi）
虽然都是safari，但只是名字一样，Mac或PC上的safari不能代替全部测试；
<a>标签不用描述hover，点下去就跳转了，想想也知道没法悬停；
项目的一期需求都完成了，总结了几个iPhone定制点，数量不多，也很容易：
doctype的设定：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
在做发布页面的时候发现一个奇怪的问题，textarea输入框最右边被浏览器吃掉一块显示不全。屏幕自适应宽度问题：
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
分别指的是：宽度320px；默认比例1.0；最大放大比例1.0；不允许用户放大；
可按自己需要增加配置。添加到主屏幕的favcion：
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
这个是出彩的地方，可以在主屏幕上显示一个图标，相当于桌面快捷方式。字体大小
默认字体建议14px，特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点，建议18px或16px，不然比输入法文字还小，看起来很不爽。跳过头部到页面某个位置
可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区，特别在“头大”的时候。手机屏幕上寸土寸金哪~访问www自动跳转到iPhone站
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; zh-cn) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C28 Safari/419.3
PHP实现方法：if(strstr($_SERVER[HTTP_USER_AGENT],"iPhone")){
header("location:/iphone/");
die();
}JS实现方法：<script language="javascript">
<!--
//2007-11-24 hqlulu for iphone
var userAgent=navigator.userAgent;
if(userAgent.indexOf("iPhone")>0)
window.location="/iphone/";
//-->
</script>
参考阿权的实现方法
另外，Mac用户可以使用iPhone Dev Center里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。
0
投稿猜你喜欢
Mootools 1.2教程(9)——输入过滤第二部分（字符串）
互联网产品设计师自我介绍
如何使用SQL Mail收发和自动处理邮件？
如何实现网上站点维护？
PHP+MYSQL不恶补十句话
5个CSS3技术实现设计增强
System.Data.OleDb.OleDbDataAdapter与System.Data.OleDb.OleDbDataReader的区别是什么？
在网页设计中，如何使用图标来支持内容？[译]
web前端页面性能优化
使用ERWin进行基于MySQL数据库的物理设计
mssql 大小写区分方法
10个值得关注的优秀CSS框架
“生活”设计
Javascript编写Asp时需要注意的一些地方
Google谷歌的CSS前景图片合并技术
CSS双线边框研究
写给喜欢用DW编写CSS人的一些建议
JavaScript解决Joseph问题
国际上十四个优秀网页设计审核站
