iPhone现在还是蛮时髦的,可以做很多有趣好玩的事情,单单是用手指拨弄一下屏幕就感觉到很新鲜:可以用手指来操作放大和翻页 ^_^ 甚至有重力感应的游戏,太牛了

不少网站也开发了iPhone的专门页面,比如YouTube和6.cn就有了专门的页面,也许还不能说是一个很大的市场,但是毕竟可以有另外一个受众人群,所以有需要的话,还是可以花点时间做一个支持的。当然,一般的网页都可以访问,只是体验没有那么好,需要做一些修改。

很多人会很惊喜说iPhone可以看电视剧看视频了,因为6.cn有专门的页面提供访问,阿权也要做专门的页面看杂志,呵呵,以后也可以用iPhone看杂志啦~
阿权对于本次制作特别的做了一下记录,希望有需要的朋友可以有个参考
有问题可以来我blog交流一下 http://www.aslibra.com

做页面之前,先查一下相关资料:

引用
由于采用和桌面系统类似的OS X操作系统,iPhone包含了完整的Safari浏览器,可以完整显示HTML,XML网页,双击则可局部放大。系统可以自动选择Wi-Fi(802.11b/g)、GPRS(EDGE)、蓝牙2.0等连接方式,完全不需要手动设置。

动作传感器可以感应用户横握手机时自动转为横屏显示。  
屏幕分辨率:320×480(160dpi)


也就是说,基本上按照标准网页制作就好,习惯用div就好,不习惯也可以table一下的 ^_^

1 设计页面

我们的设计师monkey设计的:
点击在新窗口中浏览此图片

iPhone可以横着和竖着浏览,所以页面一般需要做100%适应,这样用户转一个方向也可以看的很自然。屏幕效果当然是按照320×480来考虑了。

2 指定页面的宽度和其它参数

阿权在做这些页面的时候的起初也不知道为何别的网站浏览起来是自适应的。从iPhone看我做的网页并非我想象着的那样自适应到320的宽度,而是有默认的宽度的,大概是1024的宽度。

点击在新窗口中浏览此图片

这一点就得研究一下了,不太懂英文,所以就只能找实例来研究啦!

比如看看 http://iphone.6.cn/
研究方法:保存下来,用iPhone浏览看看是否正常,然后去掉自己觉得可能是生效的定义方法,看看是否不正常,这样应该就可以了,够笨笨的方法了,呵呵

得到结论:
meta定义可以使得页面宽度让iPhone知道限定屏幕宽度
<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
看字面理解就是:宽度320,默认比例1.0,最大放大比例1.0,用户不能放大

这个看具体页面可以细节调整。

比如我设置的是首页不能放大,参考宽度为320
width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;

可以看到效果啦:
点击在新窗口中浏览此图片

那在杂志页面就设定为:
width=760; initial-scale=0.6; maximum-scale=1.0; user-scalable=1;
也就是参考宽度是760,默认显示0.6的比例,可以最大放大到1.0,可以缩放

点击在新窗口中浏览此图片

把以上元素应用在页面就可以啦~~
你可以用iPhone来访问看到效果哦:
http://www.zcom.com/iphone/

3 设置页面加载完成的位置(参考6.cn)

一般页面都有页头显示,所以可以控制页面移动一下,直接显示内容
上面的图片可以看到页头有内容,加上处理体验就好很多:

点击在新窗口中浏览此图片

点击在新窗口中浏览此图片

实现的脚本

<script type="application/x-javascript">
addEventListener("load", function()
{
 setTimeout(hideAddressbar, 0);
}, false);

function hideAddressbar()
{
 window.scrollTo(0, 140);
 //xy位置,根据页面进行调整
}
</script>


4 让用户访问www页面自动跳转到iPhone页面

php方式:
$_SERVER[HTTP_USER_AGENT]的值是:
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
确认一下有没有iPhone字样也许就可以了


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>


5 让iPhone主界面有你的图标,点击访问

我是参考了6.cn的做法啦,呵呵,具体参考一下作者网站:
Livid 在 2007-11-11 发布的做法:
http://www.livid.cn/doc_view.php?doc_id=5684

也就是一个压缩包对图标的定义:
1 Default.png 背景图
2 icon.png 图标文件
3 Info.plist 定义
4 Embark 不清楚...

查看Info.plist,修改一下就成为自己定义的了:

<key>EmbarkURL</key>
<string>http://www.zcom.com/iphone/?icon</string>


另外一个名称定义阿权就不太清楚了

<key>CFBundleIdentifier</key>
<string>com.zcom.embark</string>


参考作者的安装方法就成啦:

点击在新窗口中浏览此图片




原创内容如转载请注明:来自 阿权的书房
收藏本文到网摘
tong-ming Homepage Email
2008/11/27 04:32
ZCOM娱乐空间是一款优秀的娱乐资源管理软件,具备高速下载、本地搜索、自动管理等实用功能。它能帮你轻松地找到电脑中曾经 听过的音乐,看过的视频、图片,玩过的小游戏,并且方便地播放和管理它们。ZCOM娱乐空间还免费提供《瑞丽》、《时尚》、《电影世界》、《国家地理》等电子杂志,让你享受最流行的的娱乐服务!

ZCOM杂志订阅器下载 www.tong-ming.cn

主要特色:
1.最全的歌词库,每日不断更新,播放歌曲时自动匹配相应的歌词信息;万首推荐歌曲,随意“搜”听
2.强大的视频点播系统,可以流畅的在线观看完整最新大片。
3.内置Flash视频播放器,最先支持下载Falsh格式的视频内容(FLV文件)
4.提供超过5万个的经典Flash小游戏,并且支持本地保存,免除网络影响
5.最大的电子杂志发行平台,可以免费浏览、下载、订阅近万本精美杂志



0.25版本更新内容:
修改了 音乐模块不能搜索到音乐的BUG

ZCOM杂志订阅器下载 www.tong-ming.cn
九月
2007/12/06 09:48
不错的分享
呵呵,
我个人还比较喜欢独享,方便自己看电子书和相片
我设计的页面,有时间互相交流
http://hiphotos.baidu.com/design9/pic/item/231492b70bad09f931add1d7.jpg
hqlulu 回复于 2007/12/06 13:02
呵呵,看来很有意思,做一个iphone可使用的管理后台挺好
hurryup
2007/12/06 08:49
谢谢阿。偶正需要
hileo
2007/12/05 14:20
恩, 很不错!我也打算把我的那个站搞成iphone浏览的
monkey
2007/11/26 10:21
laughlaughlaughlaugh
分页: 1/1 第一页 1 最后页
发表评论
AD
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML 打开UBB 打开表情 隐藏
昵称   密码   游客无需密码
网址   电邮   [注册]
               

验证码 不区分大小写
 

阅读推荐

服务器相关推荐

开发相关推荐

应用软件推荐