Design For Mobile Web
这两天专门制作了一个手机页面，现在分享一下里面常用的一些技巧。
通过viewport来匹配设备宽度
网上常见的做法：
<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：
- 刚才搜索了一下viewport这个概念博大高深，里面还涉及到dpi等，我这里只是一种偷懒的方法。
- viewport和响应式设计理念不同，响应式设计是一套html结构适配全平台，而viewport仅仅是给移动平台使用，并不打算兼容PC平台，如需兼容PC浏览器，需要另外写判断。
iOS中的WebApp
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，这个，还真没找到方法…
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2012-09-102，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录