这里有个关键的东西叫做viewport，你经常在页面的头部里可以见到它：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

想起来了吧，就是它让你的页面不会像在桌面上那样显示，玩过windows的放大镜功能吧， 你可以把viewport想象成一个类似的放大镜，fixed的元素是相对整个页面固定位置的，你在屏幕上滑动只是在移动这个所谓的viewport，原来的网页还好好的在那，fixed的内容也没有变过位置，所以说并不是iOS不支持fixed，只是fixed的元素不是相对手机屏幕固定的。换个角度，如果所有fixed的元素都相对屏幕固定，那那些桌面版的网页在手机上还能看吗。

解决方案。1.框架 。有很多手机端框架 已经解决了这个问题

2.用position：absolute，绝对定位 然后通过JS 跟着屏幕滚动而滚动 达到固定定位的效果

移动端— position: fixed;固定定位解决方案的更多相关文章

  1. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  2. CSS——fixed 固定定位相对于父容器

    position:fixed 固定定位 用 left top 都是相对于浏览器的. 我今天想给网页做一个固定定位的导航 偶然间发现.可以用margin 相对于父容器定位. 小伙伴们可以试试. 不用le ...

  3. 关于苹果手机微信端 position: fixed定位top导航栏问题

    在移动端,position: fixed定位一般不被识别,或者在ios系统中,获取input焦点时,会导致position: fixed的top失效,下面是我验证过的方法,大家可以试试.<!do ...

  4. 在移动端H5开发中(关于安卓端position:fixed和position:absolute；和虚拟键盘冲突的问题，以及解决方案)

    一.在开发移动端webapp时,我们经常会遇到这样的问题,当我们需要在页面底部固定一个logo或者说明时,往往会采用position:fixed进行固定定位或者absolute定位到最底部 这是一个很 ...

  5. 移动端position:fixed 解决方案

    相信不少人做移动端项目的时候都会遇到position:fixed 的坑. 下面提供一个解决方法,不用引入任何其他的js库,纯css解决. 解决问题的关键就是:fixed元素内部必须嵌套一个positi ...

  6. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  7. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  8. 浮动层固定兼容IE6 position:fixed的最佳解决方案

    第一种:css方法 有时候当我们需要把一个元素固定在页面的某个部位,一般都是用css中的“position:fixed;”方法来解决,但是IE6不支持fixed,所以今天分享一个兼容IE6的页面底部固 ...

  9. position：fixed固定定位的用法

    一.position:fixed:固定定位 1.实现某个元素在可视窗口的居中位置显示 1)给自身设置宽高: 2)给自身加position:fixed: 3)用margin向左移动自身宽度的一半,向上移 ...

随机推荐

  1. 【剑指Offer】面试题27. 二叉树的镜像

    题目 请完成一个函数,输入一个二叉树,该函数输出它的镜像. 例如输入:      4    /   \   2     7  / \   / \ 1   3 6   9 镜像输出:      4   ...

  2. 《Java并发编程的艺术》并发编程的基础（四）

    一.线程简介 1.线程的概念 系统运行的最小单元 2.为何使用多线程 更好地利用系统资源(处理器多核心),提高响应速度. 3.线程的状态 NEW(创建状态) RUNABLE(运行状态,系统调度,争抢时 ...

  3. Vue - slot-scope="scope" 的意义

      <template slot-scope="scope">                     <el-button type="primary ...

  4. python csv

    Python 读取csv的某行 Python 读取csv的某列 Python写了一个可以提取csv任一列的代码,欢迎使用.Github链接 两个list写入csv文件 column1,column2 ...

  5. JPA#实体属性转换器

    __震惊,一下内容竟然是空白 用途 (自动转换数据库字段和实体属性间的最佳取值): - 1. POJO持久化到数据库表中的时候,对某些特殊属性处理后,用处理过的值作为数据库字段的值. 2. 从数据库查 ...

  6. 第四篇：Vue的项目开发

    安装Vue的脚手架cli环境 1)官网下载并安装node,附带npm https://nodejs.org/zh-cn/ node环境: 可以解释执行js语言 提供了npm应用商城,可以为node环境 ...

  7. bugku - pwn wp

    一. PWN1 题目:nc 114.116.54.89 10001 1.  直接kali里面跑nc 2.ls看看有啥 3.明显有一个flag cat查看一下 搞定 二 . PWN2 题目:给了nc 1 ...

  8. js加密（十四）mail.yw.gov.cn/ RSA

    1. url: http://mail.yw.gov.cn/ 2. target:登录js 3. 简单分析: 寻找加密js: 3.1 直接寻找加密的参数p是不好找的,所以我们试着去寻找一些更明显的参数 ...

  9. 九十三、SAP中ALV事件之七，对自己定义的工具栏进行添加和删改

    一.我们来到工具栏页面,如果不想要某个工具栏,删掉相应的文字再双击空白就可以了 二.我们添加一个工具栏,如ZADD,双击文字 三.保存静态文本,会弹出一个功能文本框 四.填写相应的内容后,点击对勾保存 ...

  10. centos7如何修改IP地址

    步骤1:使用vi编辑 /etc/sysconfig/network-scripts/目录下的ifcfg-ens160 配置文件 [root@model ~]# [root@model ~]# vi / ...