最近移动前端项目中遇到的两个坑

尽管要多加避免，但还别说，坑还真得常踩常有，不要以为手机端都是 Webkit 的天下就简单，不用处理浏览器之间的兼容问题，——其实不一致性的问题还是挺大的。

两个 bug 都是涉及 iframe 的——iframe 真是不好搞！

事情是这样的，一个内嵌于 iframe 的页面，因为需要从认证接口中返回 token 作为登录凭证，读取接口信息是没问题的，然后需要用 session 把登录信息保存起来。奇怪的是，session 无效，就像丢失了一样！脱离了 iframe 就是单独页面的话就没事。而且不是全部手机都这样，高版本安卓和苹果都这样（桌面和某些版本安卓正常）。我们知道一般用 cookies 一对一 session 的，估计 iframe 的 cookie 鉴于更完善的安全机制所以不能像低版本那样“愉快”地使用 cookies。

后来简直与甲方说出了我们“殚精竭虑”，无奈之下，只好使出最笨的方法，通过 url 参数传递认证数据。还好几个页面，加起来也没那么痛苦了……

第二个坑是苹果专属的，Safari 居然不能约束 iframe 内页面的宽度！安卓就 ok。简单说发现嵌入页面在移动端会出现变形，即使你加上

<meta name="viewport" content="width=320, initial-scale=1, user-scalable=yes" />

也无效。如果写死一个宽度那么就不能兼容苹果各种屏幕了。于是我居中正文，但有些人又不同意这种不符合美观的做法，于是我用 js 读取屏幕宽度然后写入 document.body.style.width。两行代码搞定，关键是思路。

时间： 2024-12-24 00:35:58

最近移动前端项目中遇到的两个坑的相关文章

iOS项目中Json转Model的坑

Json转Model json转model,是个开发都会遇到过.都已经9102年了,谁还不会用个第三方框架搞.拿起键盘就是干!打开podfile,把大名顶顶的YYModel写上,pod install一下.再用上ESJsonFormat,直接根据json,都能把model生成好. 特殊处理 啥?返回的字段值不是我们所需的在日常开发中,经常会遇到一些接口字段返回的值,并不是我所需要的类型的情况,这个时候,我们都会对这个字段进行处理.举个栗子: 123456 /** 错误代码 */@property

如何在前端项目中引用bootstrap less？

在基于bootstrap css框架的前端项目开发中,如果有grunt build系统,那么工作流是:客制化less,在less中定义自己的 CSS,同时可以随意引用bootstrap中预定义好的css类,一旦保存文件,grunt则开始重新构建,生成最后的生产文件.问题是: 如何能够在自己的客制less文件中引入bootstrap的less变量或者mixin呢? 比如:我如何能够实现在屏幕尺寸在@screen-md时,将所有的图片隐藏呢? 对于这个场景,假设项目目录结构如下: > bower_c

前端项目中gulp的使用

在公司项目开发中,有一个前端项目,我们使用gulp来生成目标文件(css,js,html文件) 进入到这个项目目录中  C:\My Project\FrontEnd\TestBuilder 然后依次运行如下命令: npm install npm run build gulp  default (假如 gulpfile.js 中gulp的任务名字是 default) 原文地址:https://www.cnblogs.com/wphl-27/p/9626763.html

Vue 实际项目中你可能会遇见的坑

纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. 一.项目的登录拦截及用户权限访问控制问题. 一个很常见的需求就是对未登录的用户进行路由拦截和用户的权限访问,如果你的项目之前是通过后台控制访问路由的,那么之前的后端现在可能需要在前端也需要控制了,由于我们用vue脚手架搭建的都是纯前端的路由访问,先看看我们的一般的项目路径: 你可能会注意到Vue的

前端项目中使用git来做分支和合并分支，管理生产版本

最近由于公司前端团队扩招,虽然小小的三四团队开发,但是也出现了好多问题.最让人揪心的是代码的管理问题:公司最近把版本控制工具从svn升级为git.前端H5组目前对git的使用还不是很熟悉,出现额多次覆盖代码和提交冲突的问题.还有最近一次产品版本迭代的时候出现额一个问题: 一个正在开发的版块在下一次版本迭代中不需要上线了,而是修改了这个版块的一些小细节.这个正在开发的版块需要在下下一次产品迭代的时候上线. 这里来简单的记录下使用git做代码版本控制的方法:(主要是建立分支,在分支上修改当前版本的b

项目中导入导出两个关联的库

1.用system账号登陆 创建两个数据库并赋予权限1)wlmqpb数据库 密码 lxx详细情况见:http://www.cnblogs.com/xinxin1994/p/5257472.html2)sjzx数据库 密码lxx详细情况见:http://www.cnblogs.com/xinxin1994/p/5257472.html2.(1)把导出来的wlmqpbjg.sql(表结构.函数.存储过程等)用ImportTables导入 (2)把导出来的wlmqpb.sql文件(表数据)用Impor

关于vue的前端项目中token使用以及验证机制 携带token登录详情 vue-router的跳转说明

在login.vue中通过发送http请求获取token//根据api接口获取tokenvar url = ‘http://www.baidudd.com’ + "/session";this.$axios.post(url, {username: this.loginForm.username,password: this.loginForm.pass}).then(res => {// console.log(res.data);this.$message.success('

裸k8s搭建中遇到的两个坑

在装docker的时候报错了,需要先安装selinux版本.才能安装容器. 需要按照提示安装这个包. 采用强制安装.rpm -ivh 包名字 --force --nodeps 在k8s的master上执行初始化集群后,会在末尾生成token,需要拷贝token去node节点上执行. 原文地址:https://www.cnblogs.com/tigergaonotes/p/11123473.html

前端开发中的Error以及异常捕获

本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提高代码健壮性是一项很重要的工作.本文将从Error开始,讲到如何捕获页面中的异常.文章较长,细节较多,请耐心观看. 前端开发中的Error JavaScript中的Error JavaScript中,Error是一个构造函数,通过它创建一个错误对象.当运行时错误产生时,Error的实例对象会被抛出.