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

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

问题解决。

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

时间: 2024-10-06 14:28:19

网站移动版本开发踩坑实录四的相关文章

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

最近公司项目需要开始做wap版本开发,虽然在上一家公司也有做过类似的工作,由于当时公司产品没有严格要求适配各个移动设备,也并没有很多动作效果和图片自适应这类的效果,相对来说体系没有那么成熟,更多是在wap版本上可以用就ok了(其实更多的工作集中在功能和cssser身上,交互效果没有那么强,唯一做的好玩一点的工作是菜单滑动.图片缩放[未被上线过]),因此基本上没有在移动端踩各种坑:说了这么多上一家公司的wap版本,下面开始讲讲现在做的项目让我在wap版本上踩的各种坑开始说起.   第一坑:技术选型

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

鉴于本人在移动wap上的开发经验少,遇到的问题确实不少,很多问题都是为了项目紧急上线而不得已的写临时性的fixed的方案,所以解决方法也存在缺陷,这次记录的虽然没有什么高大上的东西,把几个明显的问题和解决过程记录下来. 1.ios系统浏览器事件会触发两次 问题发现于ipad.iphone上,起初遇到这个问题本以为自己在绑定了两次事件(touchstart click),但是由于最新的ipad对click事件不支持以及为了防止重复绑定事件,因此我特意处理了关于touchstart和click做了一

JAVA实用案例之文件导出(JasperReport踩坑实录)

写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小Demo,JAVA实用案例之文件导入导出(POI方式). 虽然简单,但是企业应用的原理基本上也就是这样,只不过是封装的更好些,不像我之前写的那样每个Cell都需要定义,其实poi的方式也是我目前最推崇的方式之一了.主要原因是jxl不支持xlsx,Jaspe

Android 10 踩坑实录 👉 2020-01-20

1.https联网限制 Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setUseSessionTickets(Z)V (light greylist, reflection) Accessing hidden method Lcom/android/org/conscrypt/OpenSSLSocketImpl;->setHostname(Ljava/lang/String;)V (light g

Spring Boot 开发系列一 开发踩坑

这是学习spring boot 的第二周,公司号称这玩意是啥都不会的新手就可以填空开发,于是决定上手一把,怎么说我也是搞了快七八年的.NET和.NETcore,没想到无情打脸,快被这个能填空开的IDE搞疯了,下面是记下一些自己踩坑开发中遇到的一系列无穷无尽的问题. 一 .集成MyBatis a)首先如何理解这个  MyBatis 的东西,我的理解是 :MyBatis 有点类似ORM的感觉,跟 JPA很类似,就是一个orm,需要一个类似 dbcontext的东西,这个东西,在MyBatis 里面叫

Oracle DBLink跨数据库访问SQL server数据同步 踩坑实录

项目需求:这里暂且叫A公司吧,A公司有一套人事管理软件,需要与我们公司的软件做人员信息同步,A公司用的是SQL server数据库,我们公司用的Oracle,接口都不会开发(一万句"fuck you"),就单单给我们公司提供了一个SQL server的账户和密码,还有一个视图.后来百度一番,可以通过DBLink跨数据库访问,然后做数据信息同步功能. 安装过程中,踩了不少的坑,需要配置很多的东西,QQ群里也请教不少人,都很少人听说还有这玩意,现在做数据对接,都是走到接口,传JSON字符串

Visual Studio For MacOS .NetCore开发踩坑记

自从Visual Studio For  MacOS公布以来,就开始尝试在Mac上进行net core开发.断断续续遇到了各种奇奇怪怪的问题.虽然大部分利用google查查(百度屁都查不出来),都能找到解决方案,但还是做个记录吧~ 问题一: 错误提示:error MSB4057: The target "Build" does not exist in the project 记录时间:2017-03-31 原因解析:Mono版本低了.对,就是Mono版本低了,别问我为什么开发netc

前端学习---移动端vue开发踩坑记

前言: 大概两个月前投身于一个项目中去,项目是一个移动端的项目,所选用的框架是时下比较流行的vue.这篇文章也是针对这个项目和以前自己学习时的一些总结,包括一些通用的移动端开发要注意的事项.vue开发遇到的一些问题.本文的目的是为了在以后的开发中我们可以避免这些坑,提高我们的开发效率. 一.移动端开发特有问题: 1.移动端样式的兼容性: 在当前移动端的开发要面对各种不同的手机,不同的手机DPI也是不同的,比如Iphone 8的DPI就是2,Iphone 8P的DPI就是3.为了让页面可以兼容不同

微信小程序开发踩坑记录

1.问题:如果页面个数多于五个,要怎么处理 wx.navigateTo(OBJECT)最多只可以打开五个页面,如果页面多于五个,还想要返回,应该怎么处理呢 答:wx.redirectTo() 2.问题:获取不到unionId 我的小程序让用户登录后,用户信息解密出来的json结构没有unionId,可能是什么原因?是我小程序的后台配置有问题吗? 答:需要到开发者平台绑定 3.问题:微信小程序,如何调试? 什么方法,用alert吗? 答:console.log 4.问题:安卓上wx.uploadF