网站移动版本开发踩坑实录四

前戏：晕晕乎乎正在瞌睡中，测试妹纸拿来一个ipad，开着微博，打开了站点说你看，微博自带浏览器点击放大之后网页没有自适应啊（网站因为有图片神马的，全站图片要自适应各类移动设备），我惊醒，心想我草这是啥功能， 我这种木有ipad的人何时看见过这个功能。

好吧既然出问题了，就开始想一想吧---继续昏迷10分钟....

开始：拿着ipad上大概看了一下，当微博打开的时候，其实页面仍是有一点冗余的空白宽度，既然作了一个80%（估计）的可视展现区域，可是仍是能有用移动留出空白，而后点击放大，页面平铺这个视窗，第一想法必定是没调起个人重绘代码， 可是本身体验一下那个展现区域，感受也不须要调起来（我从新调整页面，监听的是第一页面旋转，不然resize）因此resize没有绑定过事件，既然只是ipad上的微博是这样，就先确认一下ipad 微博的的useragent吧，看了一下居然吃果果的有 一个 Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206 iPad1,1__weibo__3.5.1__ipad__os5.1.1吼吼那就是你了

var iPad = navigator.userAgent.toLowerCase().match(/iPad/i);   
var isIpadWeibo = null;
if(iPad) {
    var isIpadWeibo = navigator.userAgent.toLowerCase().match(/_weibo_/i);
}

因此只要判断是isIpadWeibo 那么我就把事件绑定一次算了

if(isIpadWeibo) {
    $(window).on('resize', function() {
        //js调整图片自适应代码
    }); 
}

问题解决。

 

二、webApp添加到主屏幕的功能 不管是android仍是ios系统中，以chrome为例 浏览器访问一个网址，能够将网址加入到主屏幕（即webApp)，变成相似于本地APP的形式打开，能够隐藏地址栏，只显示状态来达到相似本地APP的体验（pc上也能够添加到桌面）。 作到这样只须要在head中加入:

<meta name="apple-mobile-web-app-capable" content="yes"><!-- ios中，webApp功能-->
    <meta name="mobile-web-app-capable" content="yes"><!--chrome检测的meta -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- ios中，状态条背景色-->
    <link rel="shortcut icon" sizes="144x144" href="/images/logo.png"><!--android及pc系统添加到webApp的icon -->
    <link rel="apple-touch-icon" href="/images/logo.png"><!-- ios系统添加到webApp的icon -->


这样子在ios和android的平台下添加到主屏幕之后的webApp就会带有设置好的icon了，不然就是系统默认设置
具体参见：


http://www.w3cplus.com/mobile/mobile-terminal-refactoring-create-page.html
http://stackoverflow.com/questions/21018750/add-to-homescreen-button-in-android-does-not-show-website-as-a-web-app