存档

2009年5月 的存档

iPhone 版网站开发小记

2009年5月26日
1 条评论

以下的东西不是什么新东西，只是这两天在给基金会网站做 iPhone 版的时候，用到一些小东西，虽然不是什么难东西，但是却是很有用的东西，这里记录一下。

1.指定页面的宽度和其它参数，在meta定义可以使得页面宽度让iPhone知道限定屏幕宽度代码如下:

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

看字面理解就是：宽度320，默认比例1.0，最大放大比例1.0，用户不能放大，如果想实现缩放效果，可以细节调整比例，设置缩放比例即可。

把以上元素应用在页面就可以啦~~网页编码gbk和utf-8无所谓

2.设置页面加载完成的位置，safari浏览器上面有个搜索框，进入网站后就显示在那很不友好，你可以加上下面的代码，向下移动一下网页就好了，体验很好

实现的脚本

  1. <script type=“”application/x-javascript”“><!–
  2. addEventListener(”load”, function()
  3. {
  4. setTimeout(hideAddressbar, 100);
  5. }, false);
  7. function hideAddressbar()
  8. {
  9. window.scrollTo(0, 1);
  10. //xy位置，根据页面进行调整
  11. }
  12. // –></script>

3.让用户访问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字样也许就可以了

  1. if(strstr($_SERVER[HTTP_USER_AGENT],“iPhone“)){
  2. header(“location:/iphone/“);
  3. die();
  4. }

js方式：

  1. <script type=“text/javascript“><!–
  2. var CFMOBI_TOUCH = ["iPhone","iPod","Android","BlackBerry9530","LG-TU915 Obigo","LGE VX"];
  3. for (var i = 0; i < CFMOBI_TOUCH.length; i++) {
  4. if (navigator.userAgent.indexOf(CFMOBI_TOUCH[i]) != -1) {
  6. //do something…..
  8. break;
  9. }
  10. }
  11. // –></script>

kingabird JavaScript