移动webapp开发小贴士
- - 移动开发 - ITeye博客1 创建主屏幕图标 （Creating a home screen icon ，for ios）. 2 启动画面图像 （Creating a splash screen， for ios）. 3 全屏 （Making it full-screen， for ios）– 更像本地App. 4 改变状态栏 （Changing the phone status bar, for ios）.
移动webapp开发小贴士
标签：
移动
webapp
开发
| 发表时间：2015-03-13 21:55 | 作者：柿子love
出处：http://www.iteye.com
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]]> 拨打电话的链接
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
相关 [移动 webapp 开发] 推荐：
Moobile：基于 MooTools 框架实现的移动 WebApp 开发框架
- - 我爱水煮鱼Moobile 是一个基于 MooTools 框架实现的移动 WebApp 开发框架，目前它主要在 iOS 设备的浏览器上实现原生应用的体验. Moobile 实现了很多类似 iOS 原生的控件，比如：工具栏，按钮，图片，列表，激活状态，幻灯片等等，它还实现了淡入淡出，幻灯片滑动，立体翻转等效果，还能显示类似原生的警告框.
webkit webApp 开发技术要点总结
- - ITeye博客如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢. 幸好，webkit内核的浏览器能帮助我们完成这一切. 接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：. 对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，.
[原]WebAPP开发之viewport的深入理解
- - woshiwanxin102213的专栏平常移动端开发中，页面的head中都会引入下列这句话，那Viewport是什么，理解了这个才能让我们开发的网页更好适配不同的移动设备. Viewport是手机屏幕上能用来显示我们的网页的那一块区域. 但是viewport并不等于浏览器的可视区域. 可以自定义，自定义后，手机按这个尺寸的比例在可视区域缩放.
webapp适配基准
- - 崔永键的博客移动端网络流量已经超过pc. 基准a： android 4.x 占了60%左右，2.3x在30%左右. ios6.x的safari也占比很大. 基准b： 考虑一下 ios5. 基准c： 考虑下ios4，以及android2.x. 分辨率： 第一组 “520*xxx”以下的为一组， 第二组“640*xxx，800*xxx，720*xxx”等分为一组.
推荐几个Html5做的WebApp
- - CSS库Everybody!喵~
二当家出马，一个顶仨. 今天来不为别的，给大家推荐几点刚上线不久的WebApp. 最近涌现出了一批号称Html5版的WebApp，由于还处于社会主义初期阶段，所以鱼龙混杂，有虾米也有大鱼. 反正只要是触屏智能机打开浏览器输入以上网址然后全屏，怎么说呢. 反正你是感觉不到这是浏览器在跑的.
WebAPP ViewPort iPhone5 黑边解决方案
- - 大猫の意淫筆記最好先仔细看一遍苹果官方文档 Configuring the Viewport. 容易被忽略的就是即使 width=640的时候,scale=1是按照device-width而不是按照640的大小. iPhone 的 device-width 等于320,如果我设置 width=640,scale=1.
WebApp将打破苹果封闭商业模式
- linsen - 互联网的那点事由终端、操作系统、软件商店共同组成的封闭商业模式跟苹果全球排名第一的市值一样坚挺，然而建立在HTML5标准之上的基于浏览器的网络应用程序（WebApp），很有可能成为苹果AppStore的掘墓人. 基于浏览器开发并运行应用程序，是Google在设计Chrome时提出的概念，这是Google推广云计算的其中一步.
Maven webapp 部署到tomcat的三种方式
- - 研发管理 - ITeye博客Maven创建完webapp项目部署到tomcat有三种方式，如果有知道其他方式部署的，欢迎补充. 第一种、讲war包copy到tomcat的webapps目录下. 首先选中你的工程，右键-->Run As-->Maven install，如下图：. 等build成功后，找到workspace中的项目，然后找到target中的war包，copy到tomcat的webapps目录下启动即可.
移动开发那些事
- - 微博UDC说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发. 但从这两种开发模式的特点来说，从它们诞生之日起就开始了不断的争论，孰好孰坏，本文不作探讨，只是简单罗列下本人开发遇到的问题和最终的解决方案.