WebAPP 开发tips for iPad

一、应用启动画面设置:
页面头部加入


重点在下面:
两张图片必须符合宽高标准才能正常显示:
startup_portrait.png 768x1004
startup_landscape.png 748x1024
1、要注意横屏用图必须竖过来,也就是宽748高1024才能显示,怕说不清楚做了个示意图;
2、在safari里选“添加到主屏幕”时要保证设备是竖放,才能在完成后成功显示启动画面。


部分措辞有调整,原文传送门。
【WebAPP 开发tips for iPad】
示例一枚
[html]view plain copy



二、禁止页面缩放拖动等

在中加入
[html]view plain copy
  1. ontouchmove="event.preventDefault()" //锁定viewport,任何屏幕操作不移动用户界面(弹出键盘除外)。

三、一些特殊事件

[html]view plain copy
  1. Touchstart //当手指接触屏幕时触发
  2. Touchmove //当已经接触屏幕的手指开始移动后触发
  3. Touchend //当手指离开屏幕时触发
  4. touchcancel
  5. gesturestart //当两个手指接触屏幕时触发
  6. gesturechange //当两个手指接触屏幕后开始移动时触发
  7. gestureend

例如采用Touchend代替onclick,可以有效的去掉点击产生的阴影框。注意:ontouchend 不可用于 IE
或者也可以用CSS解决阴影框
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。

    推荐阅读