我们用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. 痞子衡嵌入式：Farewell, 我的写博故事2022

    -- 题图:苏州荷塘月色 2022 年的最后一天,写个年终总结.困扰大家三年之久的新冠疫情终于在 12 月全面放开了,痞子衡暂时还没有阳,计划坚持到总决赛.对于 2023 年,痞子衡还是充满期待的,慢 ...

  2. 企业应用架构研究系列二十五：IdentityServer4 认证服务搭建

    IdentityServer4 更新了开源协议,曾经想替换它,不在使用IdentityServer4 ,但是后来,研究来研究去,发现IdentityServer4 的功能实在是强大,设计体系完整,随着 ...

  3. LVGL 中图片使用问题

    此笔记主要是记录在 LVGL 中使用图片的几种方式,以及使用过程中遇到的问题.最近在 ARM linux 中使用 LVGL 时,发现加载图片变得很卡,一开始还好,当连续加载的图片变多后,特别是动画的过 ...

  4. 使用SQL获取当前周别，oracle日期处理

    使用SQL获取当前周别 select to_char(sysdate,'yyyyww') from dual  select to_char(to_date('20200611','yyyymmdd' ...

  5. BUG日记---SSM进行多表查询错误-----页面使用<c:foreach>错误

    javax.servlet.ServletException: javax.servlet.jsp.JspTagException: Don't know how to iterate over su ...

  6. 带你熟悉3种AQS的线程并发工具的用法

    摘要:AQS 的全称为(AbstractQueuedSynchronizer),AQS 是一个用来构建锁和同步器的框架,使用 AQS 能简单且高效地构造出应用广泛的大量的同步器. 本文分享自华为云社区 ...

  7. 【新晋开源项目】内网穿透神器[中微子代理] 加入 Dromara 开源社区

    1.关于作者 dromara开源组织成员,dromara/neutrino-proxy项目作者 名称:傲世孤尘.雨韵诗泽 名言: 扎根土壤,心向太阳.积蓄能量,绽放微光. 拘浊酒邀明月,借赤日暖苍穹. ...

  8. vue3 | slots

    一.什么是插槽 插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot>  表示,父组件可以在这个占位符中填充任何模板代码,如 HTML.组件等,填充的内容 ...

  9. TCP与UDP、socket模块

    1.传输层之TCP与UDP协议 1.TCP协议 1.传输控制协议(也称为TCP协议或可靠协议)是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议,(数据不容易丢失);造成数据不容 ...

  10. LeetCode_单周赛_331

    2558. 从数量最多的堆取走礼物 题意 给一组数字,每秒都选择最大的一个,留下其平方根 用 最大堆就行 code class Solution { public long pickGifts(int ...