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

前戏:晕晕乎乎正在瞌睡中,测试妹纸拿来一个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调整图片自适应代码
    }); 
}

问题解决。

网站移动版本开发踩坑实录四,,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。