开发iPhone版校友录

8 月 28, 2009

这几天忙个合作,开发iPhone版校友录。用了很久的iPhone,为它量身定制一套页面还是头一次,好在限制不是很多,会写html基本呈现就不成问题了,外加注意一些特殊处理方法,一个iPhone版网页就搞定了。

写在前面的话:

  1. iPhone屏幕分辨率是320×480(160dpi)
  2. 虽然都是safari,但只是名字一样,Mac或PC上的safari不能代替全部测试;
  3. <a>标签不用描述hover,点下去就跳转了,想想也知道没法悬停;

项目的一期需求都完成了,总结了几个iPhone定制点,数量不多,也很容易:

  1. doctype的设定:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    在做发布页面的时候发现一个奇怪的问题,textarea输入框最右边被浏览器吃掉一块显示不全。
  2. 屏幕自适应宽度问题:
    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    分别指的是:宽度320px;默认比例1.0;最大放大比例1.0;不允许用户放大;
    可按自己需要增加配置。
  3. 添加到主屏幕的favcion:
    <link href="/apple-touch-icon.png" rel="apple-touch-icon">
    这个是出彩的地方,可以在主屏幕上显示一个图标,相当于桌面快捷方式。
  4. 字体大小
    默认字体建议14px,特别是锁定屏幕缩放不允许放大的。输入框里文字搞大点,建议18px或16px,不然比输入法文字还小,看起来很不爽。
  5. 跳过头部到页面某个位置
    可以用window.scrollTo(0, 0)实现。一般都是跳过页头直达操作区,特别在“头大”的时候。手机屏幕上寸土寸金哪~
  6. 访问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脚本,比如侧滑屏效果等。


我来第1个赞

10 条评论

  1. 真想玩iPhone,犯不着花那么大本钱买联通的,现在iPhone遍地都是,不到4K就能拿到2代8G的,足够用了,目前也没那么大需求使用3G,等真有需求了,整个市场也都平稳了,也该便宜了

评论已关闭。