开发iPhone网页的笔记

一、开发平台设置

这次的开发，我还是使用Expression Web 4 和Visual Studio 2013 ，JQuery2.10min。

由于没有iPhone，所以开发起来比较麻烦，所以我就用Chrome来模拟iPhone 5。因为IE暂时不支持iPhone模拟器。

在Chrome下打开../Aiy2/iPhone，按F12，点击左侧的“Hide Drawer”，选择Emulation为iPhone 5(因为没有iPhone 5s)，如图1所示。

图 1

二、开发

1. 设置viewpoint和屏幕等宽

现在，面临着一个问题就是Safari会将网页进行缩放，所以，我们需要设置网页的大小，防止网页进行缩放。

在网页的Meta下增加以下一句话：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

2. 设置iPhone下的图标：

size为57×57,不需要自己做圆角和反光，系统会自动完成这些工作。然后将下面这条加入head中:

<link rel="apple-touch-icon" href="images/logo.png"/>

3.设置全屏浏览

为了更加像一个本地应用，可以将Safari设置成全屏，原理就是将页面设置得比屏幕大，然后滚动到最底。在head之间增加：

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- home screen app 全屏 -->

<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 状态栏 -->

增加脚本，当页面加载完毕后执行：

var page = document.body,
    nav = window.navigator,
    ua = nav.userAgent,
    isFullScreen = nav.standalone;
            if (ua.indexOf('Android') !== -1) {
                // 56对应的是Android Browser导航栏的高度
                page.style.height = window.innerHeight + 56 + 'px';
            } else if (/iPhone|iPod|iPad/.test(ua)) {
                // 60对应的是Safari导航栏的高度
                page.style.height = window.innerHeight + (isFullScreen ? 0 : 60) + 'px'
            }
            setTimeout(scrollTo, 0, 0, 1);

4.编码

由于使用了JQuery Mobile 所以比较麻烦，不能直接使用data-role=“content”的样式，只能修改里面的样式。

切换效果：http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp

如果用js来打开页面，可以用：

 $.mobile.changePage('#pageMain', 'slideup');

</pre><p></p><p>使用JQuery的Animate的控件，position必须是absolute。</p><p><span style="font-size:12px"></span></p><pre code_snippet_id="443682" snippet_file_name="blog_20140806_8_2454329" name="code" class="javascript">$("#ulClassInfo").animate({ width: 'toggle' });

 JQuery中的icon，下载地址：

http://code.jquery.com/mobile/1.3.2/images/icons-18-white.png

版本号/图片名