将网页变成移动网络应用

如果网站的设计是采用网页识别对应设计(Responsive Web Design), 现在可以考虑将之设计成一个简单的移动网络应用（WebApp）。网络用户无需下载任何应用程序，只需浏览该网站然后点选智能手机或移动设备上的菜单，添加该网站至主屏幕即可将应用程式安装到移动设备上。
现有的网页识别对应设计网站只需加入一些支持移动网络应用的基本元素标签（meta）及简单的相应代码即可实现移动网络应用。

基本必要元素标签

[code]
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=2, user-scalable=no” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
[/code]

iOS移动网络应用快捷图标

图标是应用程序必需的组成部分。如果没有提供程序所需的各种尺寸的图标，系统会自动将已经存在的某个图标文件缩放到合适的尺寸。建议为每个需要的尺寸提供合适的图标文件。

[code]
<link rel=”apple-touch-icon” href=”touch-icon-iphone.png” />
<link rel=”apple-touch-icon” sizes=”72×72″ href=”touch-icon-ipad.png” />
<link rel=”apple-touch-icon” sizes=”114×114″ href=”touch-icon-iphone4.png” />
[/code]

取自参考：Apple Developer

移动网络应用程序开启界面画面 这是必要的元素标签，否则就算用户添加了应用程序至主屏幕也会用内置浏览器开启。每个移动设备都需要提供应用程序一个准确尺寸的启动画面，视网膜像素图片是可选的元素标签。

[code]
<!– iPhone –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPhone.jpg”
media=”(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)”
rel=”apple-touch-startup-image” />

<!– iPhone (Retina/视网膜像素) –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg”
media=”(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)”
rel=”apple-touch-startup-image” />

<!– iPhone 5 –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg”
media=”(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)”
rel=”apple-touch-startup-image” />

<!– iPad Portrait（垂直模式） –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg”
media=”(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)”
rel=”apple-touch-startup-image” />

<!– iPad Landscape（平放模式） –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg”
media=”(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)”
rel=”apple-touch-startup-image” />

<!– iPad Portrait (Retina/视网膜像素) –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg”
media=”(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)”
rel=”apple-touch-startup-image” />

<!– iPad Landscape (Retina/视网膜像素) –>
<link href=”http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg”
media=”(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)”
rel=”apple-touch-startup-image” />
[/code]

隐藏浏览器地址栏的控件（全屏模式）
这是让iOS用户打开页面的时候默认全屏。隐藏浏览器的地址栏及菜单的解决方案。

[code]
<!– hide address bar for iOS –>
<script type=”text/javascript”>
var hideUrlBar = function(){
if (window.pageYOffset <= 0){
window.scrollTo(0,1);
}
};
window.addEventListener(‘load’,function(){
window.setTimeout(hideUrlBar,0);
},
false
);
</script>
[/code]

取自参考：谷歌移动网页

iOS添加主屏幕的提醒插件
这是一个选择性的提醒插件，主要是提醒网络用户可以添加主屏幕成为快速的网络应用。支持二十二个多国语言包挂中英文，日文及韩文。暂时无支持安桌系统。

[code]
<!– add to home screen –>
<script type=”text/javascript” src=”https://raw.github.com/cubiq/add-to-homescreen/master/src/add2home.js”></script>
<link rel=”stylesheet” type=”text/css” href=”https://raw.github.com/cubiq/add-to-homescreen/master/style/add2home.css” />
[/code]

取自参考：Cubiq.org

返回页面顶部导航工具按钮
这个也是选择性的插件，方便网络用户加速返回页面顶部。这个也需要加载jQuery。

[code]
<!– Back To Top/Right Menu –>

<style type=”text/css”>

/* scroll top */
#toTop {

/*border:1px solid #ccc;*/
background-color: #000;
text-align:center;
padding:15px;
position:fixed; /* this is the magic */
bottom:10px; /* together with this to put the div at the bottom*/
right:10px;
cursor:pointer;
display:none;
color:#ccc;
font-family:verdana;
font-size:11px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

</style>
<div id=”toTop”>^</div>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop()>100){
jQuery(“#toTop”).fadeIn()
}else{
jQuery(“#toTop”).fadeOut()
}
});
jQuery(“#toTop”).click(function(){
jQuery(“html, body”).animate({scrollTop:1},600);
return false;
})
})
</script>
[/code]

防止所有连接导向内置浏览器（包括图片连接）
如果已经成功测试了添加，启动应用程序，这是个必要的代码，否则用户在浏览应用时所点击的任何链接或图片链接都会离开应用程序而导向内置的浏览器（Safari）。这是个jQuery语言的程序，所以必须加载jQuery。

[code]
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(document).on(“click”,”a”,function(event){
event.preventDefault();
if(!$(event.target).attr(“href”)){
location.href = $(event.target).parent().attr(“href”);
}else{
location.href = $(event.target).attr(“href”);
}
});
});
</script>
[/code]

取自参考：Bennadel.com