WebAPP 开发tips for iPad

最新推荐文章于 2024-09-10 20:35:58 发布

哇当当

最新推荐文章于 2024-09-10 20:35:58 发布

阅读量1.6k

点赞数

分类专栏： Web前端文章标签： webapp safari ipad ie

本文链接：https://blog.csdn.net/fuweijunya/article/details/7449792

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、应用启动画面设置：

页面头部加入

重点在下面：

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

startup_portrait.png 768x1004

startup_landscape.png 748x1024

1、要注意横屏用图必须竖过来，也就是宽748高1024才能显示，怕说不清楚做了个示意图；

2、在safari里选“添加到主屏幕”时要保证设备是竖放，才能在完成后成功显示启动画面。

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

示例一枚

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

二、禁止页面缩放拖动等

在<body>中加入

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

三、一些特殊事件

Touchstart //当手指接触屏幕时触发
Touchmove //当已经接触屏幕的手指开始移动后触发
Touchend //当手指离开屏幕时触发
touchcancel
gesturestart //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend

例如采用Touchend代替onclick，可以有效的去掉点击产生的阴影框。注意：ontouchend 不可用于 IE

或者也可以用CSS解决阴影框