我们用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. linux系统中安装虚拟机

    在linux系统中,利用图形化界面安装虚拟机.首先启动 virt-manager,当然没有安装 virt-manager需要先安装好. 1 $ apt-get install virt-manager ...

  2. [OpenCV实战]38 基于OpenCV的相机标定

    文章目录 1 什么是相机标定? 2 图像形成几何学 2.1 设定 2.1.1 世界坐标系 2.1.2 相机坐标系 2.1.3 图像坐标系 2.2 图像形成方法总结 3 基于OpenCV的相机标定原理 ...

  3. 小样本利器5. 半监督集各家所长：MixMatch，MixText，UDA，FixMatch

    在前面的几个章节中,我们介绍了几种基于不同半监督假设的模型优化方案,包括Mean Teacher等一致性正则约束,FGM等对抗训练,min Entropy等最小熵原则,以及Mixup等增强方案.虽然出 ...

  4. vm虚拟机进入boot manager解决

    今天用vm创建了一个虚拟机,进入系统时却直接进入了boot manager,重新创建几回都不管用 于是查了下,有两种方式: 方法1.进入vm,虚拟机设置,选项,高级,固件类型,选择BIOS 参考链接: ...

  5. S2-008

    漏洞名称 S2-008(CVE-2012-0392) 远程代码执行漏洞 利用条件 Struts 2.0.0 - Struts 2.3.17 漏洞原理 S2-008 涉及多个漏洞,Cookie 拦截器错 ...

  6. [Untiy]贪吃蛇大作战（四）——游戏主界面

    游戏主界面: 由于这个场景比较复杂,需要分几个部分实现: 1.游戏背景 首先我们的游戏场景上包括了一个大的背景图片,之外再包围一个红色的区域.中间的区域才是可活动的区域,周围通过碰撞检测盒来检测是否有 ...

  7. C语言：使用malloc申请一个二级指针，外层为3个元素，内层为5个元素。使用并释放。

    //使用malloc申请一个二级指针,外层为3个元素,内层为5个元素.使用并释放. #include"head.h" int main() { int **p = (int **) ...

  8. 线段树套线性基——题解P4839 P哥的桶

    文章历史 2022-08-03: 文章初稿,由于对算法介绍过于少而被管理员打回重造. 2020-08-06:将算法介绍进行扩写,并删除了一些可有可无的内容或玩梗内容. 管理员审核题解辛苦了. 简要题意 ...

  9. 腾讯出品小程序自动化测试框架【Minium】系列（三）元素定位详解

    写在前面 昨天转发这篇文章时,看到群里有朋友这样说: 这么卷吗?这个框架官方已经不维护了. 姑且不说卷不卷的问题,要是能卷明白,别说还真不错: 不维护又怎样?我想学习,想会,分享给很期待这系列的文章的 ...

  10. three.js实现分模块添加梦幻bloom辉光光晕方案--详细注释版本~~方案三版本~~

    先上图对比方案1-2-3不同点,本文是方案3 方案1(旋转场景情况下发光体不应该遮住另一个,但是遮住了) 方案2(层次正常,发光正常) 方案3(层次正常,发光正常,但是转动场景时候部分辉光会被遮挡,但 ...