移动webapp开发小贴士

1 创建主屏幕图标 （Creating a home screen icon ，for ios）

//57*57

• 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）

• 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

• developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2

4 改变状态栏 （Changing the phone status bar, for ios）

content属性default, black and black-translucent

*developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW1

5 阻止缩放 （Preventing scaling）

6 阻止弹性滚动（Preventing elastic scrolling）

function BlockMove(event) {
     //Tell Safari not to move the window. event.preventDefault() ;
}
     ...

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);
    

• davidbcalhoun.com/2010/dealing-with-device-orientation

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）

10 阻止旋转屏幕时自动调整字体大小

-webkit-text-size-adjust:none;
    

11 IOS中禁止用户选中文字

-webkit-user-select:none;
    

12 iOS中如何禁止用户保存图片 复制图片

-webkit-touch-calloutt:none;
    

13 语音输入

14 文件上传, 从相机捕获媒体

15 电话短信

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！