这几天忙个合作,开发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")){
JS实现方法:
header("location:/iphone/");
die();
}
<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脚本,比如侧滑屏效果等。
很酷啊~
看来iphone很有前途
有意思 :)
准备入手iPhone啦
我们这里要6000多块钱。还不能打电话。
有前途的应用开发,也想入手iphone
IP很有前途,我们这里也不能打电话,但估计也快能了。
一直犹豫是不是买联通版的3Gip呢
真想玩iPhone,犯不着花那么大本钱买联通的,现在iPhone遍地都是,不到4K就能拿到2代8G的,足够用了,目前也没那么大需求使用3G,等真有需求了,整个市场也都平稳了,也该便宜了
有前途的应用开发
iphone的可扩展性太强大了。