关于 iPhone 网页开发

July 31, 2009 by SLJ | Category:HTML/CSS, iPhone/Android | 6 Comments Font size: AA AA

转载请注明来源：关于 iPhone 网页开发 | 奇亚

前段时间淘了个 iPod Touch 2 玩，与iPhone相比，少了电话，卫星导航，摄像头功能其他功能还蛮好的。

用了内置的Safari上网后才知道为什么iPhone移动设备上网份额超60%

其易用和人性化程度不由让我想扩展业务领域，想在即将下海的 CutHTML 开展这项服务。

其实用iPod浏览普通网页，可以通过收缩放大方便浏览，其浏览结果和电脑上的Safari无异（指网页的layout）

部分网页针对iPhone设备设计。不具有放大缩小功能。经过勘察得出以下总结：

1，Meta标签Viewport

<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>

对比一下限定宽度的两种方式，上面是限定宽度为320，下面的是自适应到设备屏幕宽度。
Ps: iPhone的分辨率：320×480

2，JS控制


<script type="application/x-javascript">
  addEventListener("load", function()
  {
  setTimeout(hideURLbar, 0);
}, false);
function hideURLbar()
  {
  window.scrollTo(0, 1);
}
</script>

这个是为了能在载入页面之后自动隐藏URL toolbar用的。

也有人是这么做的：

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

3，CSS 3的支持
其实iPhone的浏览器也是支持一些CSS3特性的，比如对圆角的处理。
你可以将你的CheckBox，或者Radio全部弄成有圆角的，很漂亮。而且可以指定宽度长度，在iPhone上看起来控件就会显得很大，而不会让用户很难用粗大的手指按到。
给个例子，说明一下CheckBox和Radio的样式。

.checkbox {
    -webkit-border-radius:5px;
    width: 22px;
    height: 22px;
}
.radio {
    -webkit-border-radius:10px;
    width: 22px;
    height: 22px;
}

最后贡献一个iPhone的视频网站地址
http://iphone.6.cn/ 六间房。
从源码可以学到如何创建一个视频点播的站点，比如如何嵌入“播放预览图”，如何连到mp4视频等。当然用电脑上的浏览器是看不到全部的，有iphone或者ipod touch的就来试试吧，没有的人可以下一个模拟器之类的东西看看。

其他的和普通的XHTML写起来也没什么大区别。有机会的话可以做一个奇亚 iPhone版

6 Comments

我要评论

ifener July 14, 2011
苹果的滑块功能征服了很多人！
Arsento August 8, 2009
In truth, immediately i didn't understand the essence. But after re-reading all at once became clear.
John August 6, 2009
Are you a professional journalist? You write very well.

申 August 9, 2009
Not actually. Thanks a lot

keelii August 4, 2009
移动设备上网还是苹果和opera最强吧^!^

申 August 5, 2009
恩，据说是这样,但是NOKIA上的opera稳定性实在是不好.

SLJ.me