WebAPP 开发tips for iPad教程



WebAPP 开发tips for iPad教程。一、应用启动画面设置：

页面头部加入

<link rel=”apple-touch-startup-image” media=”screen and (orientation: portrait)” href=”/apple_startup.png”> < link rel=”apple-touch-startup-image” media=”screen and (orientation: landscape)” href=”/apple_startup1.png”>

重点在下面：

两张图片必须符合宽高标准才能正常显示：

startup_portrait.png 768×1004

startup_landscape.png 748×1024

1、

。

 

部分措辞有调整，原文传送门。

 


示例一枚

  1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
  2. <meta name=”apple-mobile-web-app-capable” content=”yes” />
  3. <meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
  4. <link rel=”apple-touch-startup-image” media=”screen and (orientation: landscape)” href=”startup.png”>
  5. <link rel=”apple-touch-icon” href=”icon.png”/>

 

 

二、禁止页面缩放拖动等

在<body>中加入

  1. ontouchmove=”event.preventDefault()” //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。

 

三、一些特殊事件

 

  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即可。