我们用ul li实现了一个视频列表，一共两列，点击其中一个播放时，会将该li设置为position: fixed;width:90%;也就是变成了一个弹窗的样式。安卓手机一切正常，然而当看到苹果，我……内心一万个不相信，但是看着缩在左上角的视频，陷入了沉默。无意识的摸了下屏幕，嗯？样式又正常了？？？这是什么操作……

我命由我不由天！调整！

1、调整宽度、偏移的单位为vw，不再用百分比。这回终于看到完整的了，但是宽度仍然不对；

2、万般无奈之下，我们将这个li直接放到了body中，原来的位置先用一个空li占着。结果完美的我们想哭。这就是我们想要的啊！再将宽度等用百分比表示，样式仍然正常，可见不是因为宽度写法的问题。

总之：想要position:fixed;的元素，如果样式不符预期，不妨试一下放在body中，或许这个方法也适合你呢？

苹果手机第一次fixed没有达到预期效果，滚动下页面就正常了的更多相关文章

  1. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  2. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  3. 基于JQuery实现滚动到页面底端时自动加载更多信息

    基于JQuery实现滚动到页面底端时自动加载更多信息 关键代码: 代码如下: var stop=true; $(window).scroll(function(){ totalheight = par ...

  4. Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）

    在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...

  5. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. javascript&jquery 判断滚动到页面底部

      js 判断滚动到页面底部 CreateTime--2018年4月14日10:13:07 Author:Marydon 1.使用场景: 滚动到屏幕底部,触发加载分页数据请求(qq空间,手机端) 2. ...

  7. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  8. vue 实现滚动到页面底部开始加载更多

    直接上代码: <template> <div class="newsList"> <div v-for="(items, index) in ...

  9. vue使用H5实现滚动到页面底部时加载数据

    使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...

  10. jQuery+ajax实现滚动到页面底部自动加载图文列表效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 时隔3个月，Uber 再遭数据泄露...

    在今年9月,Uber 就发生过一起数据泄露事件,尽管黑客并无意发动大规模攻击或以此来获取巨额利益,但其成功获取对 Uber 所有敏感服务的完全管理员访问权限仍令人后怕.而在上周,名为"Ube ...

  2. [深度学习] 基于切片辅助超推理库SAHI优化小目标识别

    对象检测是迄今为止计算机视觉中最重要的应用领域.然而,小物体的检测和大图像的推理仍然是实际使用中的主要问题,这是因为小目标物体有效特征少,覆盖范围少.小目标物体的定义通常有两种方式.一种是绝对尺度定义 ...

  3. 【公式详解】【优秀论文解读】EDPLVO: Efficient Direct Point-Line Visual Odometry

    前言 多的不说哈 2022最佳优秀论文 来自美团无人机团队 作者提出了一种使用点和线的高效的直接视觉里程计(visual odometry,VO)算法-- EDPLVO .他们证明了,2D 线上的 3 ...

  4. 通过一个示例形象地理解C# async await异步

    前言 相信大家看过不少讲C# async await的文章,博客园就能搜到很多,但还是有很多C#程序员不明白. 如果搞不明白,其实也不影响使用.但有人就会疑惑,为什么要用异步?我感觉它更慢了,跟同步有 ...

  5. java入门与进阶P-2.3

    判断 if语句 一个基本的if语句由一个关键字if开头,跟上在括号里的表示条件的逻辑表达式, 然后是一对大括号"{}"之间的若干条语句.如果表示条件的逻辑表达式的结果为true,那 ...

  6. HelloWorld的常见问题与Notepad++使用-程序注释与Hello World说明

    HelloWorld的常见问题与Notepad++使用 编译和运行是两回事 编译:是指将我们编写的Java源文件翻译成JVM认识的class文件,在这个过程中, javac 编译器会检查我们 所写的程 ...

  7. JSP第五次作业

    1.教材P78-79  例4-9 1 <%@ page language="java" import="java.util.*" pageEncoding ...

  8. YonBuilder移动开发平台App拉起第三方应用

    在App的开发过程中,有一种常见场景,就是拉起第三方app,那么使用YonBuilder移动开发做app的时候,是怎么拉起第三方App的呢,下边我们讲一下步骤. 我们以安卓应用打开支付宝为例进行说明: ...

  9. 【学习日志】@NotNull注解不生效问题

    后端API需要接受fe传过来的参数,就必然涉及到参数校验. Spring提供了使用注解进行非法判断的引用(需要主动引入),继承自 spring-boot-starter-parent <depe ...

  10. 【学习日志】MongoDB为什么选择B树，而MySQL选择B+树实现索引

    先说B树和B+树的区别 B树:非叶子节点也存储数据 B+树:只有叶子节点存储数据,且所有叶子节点通过指针相连接. 为什么MongoDB选择B树而,MySQL选择B+树呢?两种数据结构的区别摆在上面了, ...