创建ipadWEB应用程序到主屏幕

1.webkit内核中的一些私有的meta标签&＃xff0c;这些 meta标签在开发webapp时起到非常重要的作用

(1)

(2)

(3)

(4)

        第一个meta标签表示&＃xff1a;强制让文档的宽度与设备的宽度保持1:1&＃xff0c;并且文档最大的宽度比例是1.0&＃xff0c;且不允许用户点击屏幕放大浏览&＃xff1b;尤其要注意的是 content里多个属性的设置一定要用分号&＃43;空格来隔开&＃xff0c;如果不规范将不会起作用。

        第二个meta标签是iphone设备中的safari私有meta标签&＃xff0c;它表示&＃xff1a;允许全屏模式浏览&＃xff1b;

        第三个meta标签也是iphone的私有标签&＃xff0c;它指定的iphone中safari顶端的状态条的样式&＃xff1b;

        第四个meta标签表示&＃xff1a;告诉设备忽略将页面中的数字识别为电话号码

2、如何去除Android平台中对邮箱地址的识别

看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地址的&＃xff0c;但在Android平 台&＃xff0c;它会自动检测邮件地址&＃xff0c;当用户touch到这个邮件地址时&＃xff0c;Android会弹出一个框提示用户发送邮件&＃xff0c;如果你不想Android自动识别页面中的 邮件地址&＃xff0c;你不妨加上这样一句meta标签在head中

3、如何去除iOS和Android中 的输入URL的控件条

你的老板或者PD或者交互设计师可能会要求你&＃xff1a;能否让我们的webapp更加像nativeapp&＃xff0c;我不想让用户看见那个输入url的控件条&＃xff1f;

答案是可以做到的。我们可以利用一句简单的Javascript代码来实现这个效果

       setTimeout(scrollTo,0,0,0);

请注意&＃xff0c;这句代码必须放在window.onload里才能够正常的工作&＃xff0c;而且你的当前文档的内容高度必须是高于窗口的高度时&＃xff0c;这句代码才能有效的执行。

4、如何禁止用户旋转设备

我曾经也想禁止用户旋转设备&＃xff0c;也想实现像某些客户端那样&＃xff1a;只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你&＃xff1a;别想了!在移动版的 webkit中做不到&＃xff01;

至少Apple webapp API已经说到了&＃xff1a;我们为了让用户在safari中正常的浏览网页&＃xff0c;我们必须保证用户的设备处于任何一个方位时&＃xff0c;safari都能够正常的显示网页内容 &＃xff08;也就是自适应&＃xff09;&＃xff0c;所以我们禁止开发者阻止浏览器的orientationchange事件&＃xff0c;看来苹果公司的出发点是正确的&＃xff0c;苹果确实不是一般的苹果。

iOS已经禁止开发者阻止orientationchange事件&＃xff0c;那Android呢&＃xff1f;对不起&＃xff0c;我没有找到任何资料说Android禁止开发者阻止浏览 器orientationchange事件&＃xff0c;但是在Android平台&＃xff0c;确实也是阻止不了的。

5、如何检测用户是通过主屏启动你的webapp

看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能&＃xff0c;按下iphone\ipod\ipod touch底部工具中的小加号&＃xff0c;或者ipad顶部左侧的小加号&＃xff0c;就可以将当前的页面添加到设备的主屏&＃xff0c;在设备的主屏会自动增加一个当前页面的启动图标&＃xff0c;点 击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别是它清除了浏览器上方和下方的工 具条&＃xff0c;这样你的webapp就更加像是nativeapp了&＃xff0c;还有一个区别是window对像中的navigator子对象的一个standalone属 性。iOS中浏览器直接访问站点时&＃xff0c;navigator.standalone为false,从主屏启动webapp 时&＃xff0c;navigator.standalone为true&＃xff0c;我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访问 我们的webapp的。

6、如何关闭iOS中键盘自动大写

我们知道在iOS中&＃xff0c;当虚拟键盘弹出时&＃xff0c;默认情况下键盘是开启首字母大写的功能的&＃xff0c;根据某些业务场景&＃xff0c;可能我们需要关闭这个功能&＃xff0c;移动版本webkit为 input元素提供了autocapitalize属性&＃xff0c;通过指定autocapitalize&＃61;”off”来关闭键盘默认首字母大写。

7,、设置应用程序图标

下一步是设置应用程序图标。这是57px 57px图标的iPhone主屏幕上显示。(ipad为114*114)

有两个选项来设置这个图标。首先是使用的图标&＃xff0c;添加圆角。要做到这一点&＃xff0c;我们使用这个元标记&＃xff1a;

第二个选择标准的苹果光泽给人的图标&＃xff1a;

8、设置启动画面&＃xff08;App加载图片,相当于经常使用的loading部分&＃xff09;

当您的Web应用程序加载&＃xff0c;你可以选择有一个闪屏显示。这个形象应该是320px * 460px(ipad为1024*768)。为了对此进行设置&＃xff0c;使用此Meta标签在您的文件头。

9、如何禁用页面的缩放功能&＃xff1a;

现在许多移动设置都支持页面的缩放功能&＃xff0c;用户可以使用手指来放大和缩小一个web页面&＃xff0c;如果你想对页面的缩放行为进行一些配置, 你可能需要了解一个叫viewport的meta标签