我们用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. NeurIPS 2022：基于语义聚合的对比式自监督学习方法

    摘要:该论文将同一图像不同视角图像块内的语义一致的图像区域视为正样本对,语义不同的图像区域视为负样本对. 本文分享自华为云社区<[NeurIPS 2022]基于语义聚合的对比式自监督学习方法&g ...

  2. History模式的配置细节

    旧文从语雀迁移过来,原日期:2021-09-13 前言 我们知道,vue 单页面应用打包出来是静态资源,一般需要 nginx 或者其他服务器访问:当如果 Vue Router 是采用 History ...

  3. python实验报告（第12章）

    实验12:GUI界面编程 一.实验目的和要求 1.学会应用常用控件: 2.学会使用BoxSizer布局: 3.学会事件处理. 二.实验环境 软件版本:Python 3.10 64_bit 三.实验过程 ...

  4. [seaborn] seaborn学习笔记2-散点图Scatterplot

    2 散点图Scatterplot(代码下载) 散点图能够显示2个维度上2组数据的值.每个点代表一个观察点.X(水平)和Y(垂直)轴上的位置表示变量的值.研究这两个变量之间的关系是非常有用的.在seab ...

  5. [C++]const_cast,dynamic_cast,reinterpret_cast,static_cast转型

    C++四种新式转型: const_cast(expression) dynamic_cast(expression) reinterpret_cast(expression) static_cast( ...

  6. arm架构的M1对有i386和x86的架构不兼容

    error: Building for iOS, but the linked and embedded framework 'AliyunNlsSdk.framework' was built fo ...

  7. 真正“搞”懂HTTP协议08之重定向

    我们知道,用来传输页面的协议就是HTTP协议,全称是超文本传输协议,而浏览器展示的页面则是用HTML编写的,HTML的全称则是超文本标记语言.你看,都叫做超文本,我在第一篇文章的时候也详细的聊过,超文 ...

  8. 除了Navicat和DBeaver，还有没有免费又好用的数据库管理/SQL工具推荐

    很多国内SQL学习者和开发者对Navicat.DBeaver等国外数据库管理工具已经很熟悉了.但是,有没有比他们更适合SQL开发者的数据库管理/SQL工具呢?这里,笔者结合自己的调研来聊一下. 笔者做 ...

  9. Unity之语音识别

    Unity之语音识别 前言 开篇 Unity版本及使用插件 正题 写脚本 挂载到游戏场景中 结尾 唠家常 今日无推荐 前言 开篇 今儿心情好,哈哈哈哈哈 今天小黑给大家带来Unity的语音识别功能,超 ...

  10. Vue21 组件

    1 模块及组件简介 组件(component)是vue.js最强大的功能之一.组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体. 每个组件都是Vue的实例 ...