这两天专门制作了一个手机页面,现在分享一下里面常用的一些技巧。
网上常见的做法:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,我的注意力暂时还没在它身上。
今天终于找个一个兼容Android和iOS的方法了。
<meta name="viewport" content="width=640px">
这样,设计Mobile Web页面的时候,只需要按照640px的宽度进行设计就可以了。测试结果是Android 2.2+自带浏览器、iOS5+自带浏览器、Chrome移动版、Firebox移动版和UC8+以上版本皆能完美自适应。
PS:
html5有多强大?看看之前Facebook在iOS上面的客户端就知道。
这里贴一些制作WebApp可能会需要用到的代码。
<!-- BROWSER CHROME -->
<!-- status bar styles: default, black, or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- hides browser chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- HOME SCREEN ICONS -->
<!-- home screen icon -->
<link rel="apple-touch-icon" href="https://cdn.mxgw.info/customIcon.png" />
<!-- home screen icon - ipad -->
<link rel="apple-touch-icon" href="https://cdn.mxgw.info/customIcon.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<!-- or -->
<link rel="apple-touch-icon" sizes="72x72" href="https://cdn.mxgw.info/customIcon.png" />
<!-- home screen icon - high res -->
<link rel="apple-touch-icon" href="https://cdn.mxgw.info/customIcon.png" media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!-- or -->
<link rel="apple-touch-icon" sizes="114x114" href="https://cdn.mxgw.info/customIcon.png" />
<!-- home screen icon, omits iOS embellishments, works in Android -->
<link rel="apple-touch-icon-precomposed" href="https://cdn.mxgw.info/customIcon.png" />
<!-- home screen icon, omits iOS embellishments - ipad -->
<link rel="apple-touch-icon-precomposed" href="https://cdn.mxgw.info/customIcon.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<!-- or -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://cdn.mxgw.info/customIcon.png" />
<!-- home screen icon, omits iOS embellishments - high res -->
<link rel="apple-touch-icon-precomposed" href="https://cdn.mxgw.info/customIcon.png" media="screen and (-webkit-min-device-pixel-ratio: 2)" />
<!-- or -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://cdn.mxgw.info/customIcon.png" />
<!-- STARTUP IMAGES -->
<!-- startup image for web apps - iPad - landscape (748x1024)
Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />
例如最常见的,隐藏导航栏,隐藏菜单栏等,不过这类效果,必须要用户把Web添加到主屏幕上,并且通过主屏幕上面的图标进入才生效。
同时,如果从WebApp中跳到了外部的浏览器或者其他软件,想再次返回到WebApp的时候,必须重新打开,不能够保存上次的访问结果。估计这事应该有解决方法。
<!-- JavsScript Hide Address Bar -->
<script>
function hideAddressBar()
{
if(!window.location.hash)
{
if(document.height < window.outerHeight)
{
document.body.style.height = (window.outerHeight + 50) + 'px';
}
setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
}
}
window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );
</script>
就这么简单,当页面加载成功的时候,页面自动向上滚动,导航了就看不到了,第一页的高度就多了50px。
404,这个,还真没找到方法…