近期移动前端项目中遇到的两个坑
2023-09-11 14:14:59 时间
虽然要多加避免。但还别说,坑还真得常踩常有,不要以为手机端都是 Webkit 的天下就简单,不用处理浏览器之间的兼容问题,——事实上不一致性的问题还是挺大的。
两个坑都是涉及 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。两行代码搞定。关键是思路。
相关文章
- gulp + webpack 构建多页面前端项目
- 如何使用jenkins搭建一个中小企业前端项目部署环境
- 从构建分布式秒杀系统聊聊验证码 给大家推荐8个SpringBoot精选项目
- Laravel + Vue + element-ui 【前端项目一】 留言评论 7
- Vue + element-ui 【前端项目一】初始化创建项目 1
- 淘东电商项目(73) -秒杀系统(前端优化)
- 如何使用jenkins搭建一个中小企业前端项目部署环境
- 苹果申请加州测试牌照获批,无人驾驶项目Titan再加速
- 精通Python网络爬虫:核心技术、框架与项目实战.1.1 初识网络爬虫
- docker 离线部署前端项目,附防火墙相关操作
- 前端项目
- Vue.js 前端项目在常见 Web 服务器上的部署配置
- 项目移植,项目环境问题
- 新建SpringCloud电商前端Vant项目
- 前端项目代码管控
- 畅购第10天项目总结(购物车与用户身份识别)
- 「基于Python技术的智慧中医商业项目」Django前端系统配置
- 「基于Python技术的智慧中医商业项目」问诊模块前端设计
- Python个人博客项目-5.统计数据应用开发
- Python新闻网站项目-9.Django前端HTML功能
- 浅析NuxtJS项目如何进行qiankun微前端架构改造
- 谷粒学院——Day05【后台系统前端项目创建、讲师管理模块前端开发】
- 智能路灯项目
- 联通5项目入围工信部网络安全试点示范项目
- SimonLiu的ESP8266与AliOS Things 学习教程系列之十九:基于linkkitapp自定义新项目
- apache开源项目--lume
- intelj idea 创建聚合项目(典型web项目,包括子项目util、dao、service)
- nginx部署前端项目的一些配置【刚入门】
- msp430项目编程32
- 如何把外部jar包在maven项目的POM中以依赖方式引入?
- MyUI是美亚柏科旗下新德汇出品的Web前端一站式项目工程框架。