1 创建主屏幕图标 （Creating a home screen icon ，for ios）
//57*57<link rel="apple-touch-icon" href="/custom_icon.png"/><link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" /><link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />- developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
- developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14
2 启动画面图像 （Creating a splash screen， for ios）
<!!-- iPhone SPLASHSCREEN--><!link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /><!!-- iPhone (Retina) SPLASHSCREEN--><!link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!!-- iPad (portrait) SPLASHSCREEN--><!link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /><!!-- iPad (landscape) SPLASHSCREEN--><!link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /><!!-- iPad (Retina, portrait) SPLASHSCREEN--><!link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!!-- iPad (Retina, landscape) SPLASHSCREEN--><link href="apple-touch-startup-image-1496x2048.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />- developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6*stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad
3 全屏 （Making it full-screen， for ios）– 更像本地App
<meta name="apple-mobile-web-app-capable" content="yes" />4 改变状态栏 （Changing the phone status bar, for ios）
content属性default, black and black-translucent
<meta name="apple-mobile-web-app-status-bar-style" content="black" />5 阻止缩放 （Preventing scaling）
<meta name="viewport" content="user-scalable=no, width=device-width" />6 阻止弹性滚动（Preventing elastic scrolling）
<script>function BlockMove(event) { //Tell Safari not to move the window. event.preventDefault() ;}</script><body ontouchmove="BlockMove(event);" > ...</body>7 检测屏幕是否旋转（Detect whether device supports orientationchange event, otherwise fall back to the resize event）
//Detect whether device supports orientationchange event, otherwise fall back to//the resize event.var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";window.addEventListener(orientationEvent, function() { alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);}, false);8 禁止webapp跳转到safari（for ios）
// Mobile Safari in standalone modeif (("standalone" in window.navigator) && window.navigator.standalone) { // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true var noddy, remotes = false; document.addEventListener('click', function(event) { noddy = event.target; //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML while (noddy.nodeName !== "A" && noddy.nodeName !== "HTML") { noddy = noddy.parentNode; } if ('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes)) { event.preventDefault(); document.location.href = noddy.href; } }, false);}9 禁用手机号码链接（for ios）
<meta name="format-detection" content="telephone=no" />10 阻止旋转屏幕时自动调整字体大小
-webkit-text-size-adjust:none;11 IOS中禁止用户选中文字
-webkit-user-select:none;12 iOS中如何禁止用户保存图片 复制图片
-webkit-touch-calloutt:none;13 语音输入
<input type="text" x-webkit-speech />14 文件上传, 从相机捕获媒体
<input type="file" accept = "image/*; capture=camera" /><input type="file" accept = "video/*; capture=camcorder" /><input type="file" accept = "audio/*; capture=microphone" />15 电话短信
<a href="sms:18888886666,18888885555″]]> 发送短信给多个人 的链接<a href="sms:18888886666?body=sms txt"]]> 发送短信附带内容 的链接<a href="tel:18888886666″]]>Call us at 18888886666</a]]> 拨打电话的链接
相关推荐
教育移动WebApp开发实践.ppt
Clouda是基于node.js的Webapp开发框架，在使用Clouda时需要安装node.js和MongoDB。 Clouda 是百度推出的一款面向资深开发者的WebApp开发框架。在Clouda中开发app，可以在多终端下实现数据同步、任务迁移。并且Clouda...
本文将深入探讨WebKit WebApp开发中的核心知识点，包括视口管理、链接资源优化以及事件处理机制，旨在帮助前端开发者更好地掌握移动Web开发技巧。 #### 一、Viewport：掌控可视区域 Viewport是移动设备浏览器中...
how-to-learn, 移动WebApp开发学习曲线
idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发webapp 热部署idea开发...
在Android平台上，WebApp开发是一项重要的技能，它允许开发者利用Web技术来构建应用程序，从而减少了对原生开发的依赖。本篇文章将深入探讨Android WebApp开发的各个方面，旨在为开发者提供一个全面的理解和实践指导...
《iPhone WebApp 开发指南》是一本专注于指导开发者如何创建高效、流畅且具有原生体验的Web应用程序的著作。在iOS平台上，WebApp是一种利用移动Safari浏览器的特性，通过HTML5、CSS3和JavaScript技术构建的应用程序...
1.了解Web工程概念及与传统软件工程的区别 2.理解WebApp的概念、特点和开发过程 3.掌握WebApp的分析、设计和测试方法 4.掌握WebApp综合开发方法及课程设计过程
Sparrow是一款专为移动Web App开发设计的前端轻量级框架，它旨在简化开发者在构建响应式、高性能的移动应用时的工作流程。在当前的互联网环境中，随着移动设备的普及，移动Web App的需求日益增长，Sparrow应运而生，...
移动浏览器的发展趋势与WebApp开发紧密相连，随着智能手机的普及，这两者已经成为互联网体验的重要组成部分。移动浏览器作为用户访问网络内容的主要入口，其发展趋势直接影响着WebApp的开发策略和用户体验。 首先，...
标题中的“基于JAVA的几套 WebApp开发源码”指的是使用Java编程语言开发的Web应用程序的源代码集合。这些Web应用程序通常是以Java Servlet、JSP（JavaServer Pages）或者Spring MVC等Java框架为基础构建的。Java是一...
开发环境与工具 PC、Adobe Dreamweaver CC 2019、Cordova、SDK、JDK、夜神模拟器 项目是基于bootstrap的框架基础上，实现了用户登录和注册、查看美食做法、分享美食做法、问题反馈、VIP用户视频观看等界面功能。
webapp开发教程之将html网页打包成app的4种方法.zip
总之，苹果iPhone WebApp开发是一个结合Web技术与移动设备特性的过程，需要开发者具备扎实的Web基础知识，理解移动设备的交互特点，并掌握相关的开发工具和框架。通过不断学习和实践，开发者可以创造出富有创新性和...
主要用于webapp开发代码编辑，主要用于手机网页版转换成webapp
一款不错的移动考勤（webapp版本）源码，有需要的朋友不要错过 二、菜单功能 前端页面应用技术 关键技术 1、AppFramwork框架，针对HTML5浏览器和移动设备开发的javascript框架，是个极其快速的查询选择库，具备...