位置：首页>> 网络编程>> 网页设计>> 开发iPhone版校友录

开发iPhone版校友录

作者：波希米亚　来源：B3 bohemia　发布时间：2009-08-31 16:29:00　

标签：iphone,开发,safari

这几天忙个合作，开发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">

</script>
参考阿权的实现方法

另外，Mac用户可以使用iPhone Dev Center里iPhone SDK中的DashCode制作Web App，而且含有不少iPhone特效的JS脚本，比如侧滑屏效果等。

投稿

开发iPhone版校友录

猜你喜欢