zoukankan      html  css  js  c++  java
  • 近期移动前端项目中遇到的两个坑

    虽然要多加避免。但还别说,坑还真得常踩常有,不要以为手机端都是 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。两行代码搞定。关键是思路。

  • 相关阅读:
    asp.net core 3 WebApi System.Text.Json 返回数据配置
    linux 版本
    netcore HttpClient Post 提交数据
    mysql information_schema 常用命令
    linux 发布console 控制台命令
    mysql 创建数据库脚本
    C# 两个 List 数组 元素是否相同 数组相等
    windows 安装redis64
    阿里云 linux 安全组
    linux 安装redis
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/7149063.html
Copyright © 2011-2022 走看看