DOM元素全屏显示解决方案(续)
解决方案 显示 元素 dom 全屏
2023-09-14 08:57:15 时间
p 前一篇中实现element全屏方案只适合单一的元素(元素里面不包含其他元素),但是如果里面有其他的元素呢?比如按钮之类的。如下图: /p
p img src= http://img.blog.csdn.net/20141127104656424?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGllYmFvY2h1bg=
前一篇中实现element全屏方案只适合单一的元素(元素里面不包含其他元素),但是如果里面有其他的元素呢?比如按钮之类的。如下图:
加上-webkit-full-screen{ width: 100%; height: 100%; } 之后全屏显示就变成:
1,button使用left和top来定位(左图)。如果用bottom和right来定位(右图)
我们会发现element在全屏模式下尺寸和screen一样大了,但是element里面的子元素尺寸和位置设定还是原先的,这就为什么会出现上述情况。
那么我们要怎么样来保证父元素全屏显示,且让其子元素相对于父元素在尺寸上和位置上保持同步呢?其实我们可以使用css中的zoom属性,就是直接对父元素进行scale操作。这样会使子元素一起放大缩小。例如:
var rateHeight = parseFloat(screen.height)/$("#div").height(); var rateWidth = parseFloat(screen.width)/$("#div").width(); $("#div").css("zoom",rateWidth rateHeight ? rateHeight : rateWidth);
通过计算元素和屏幕的尺寸比例来确定zoom的值,并且保证元素全屏模式下不变型,可能会有黑边(如果元素WH的比例和sreeen的WH比例不同的话,这里只保证一个方向上填满屏幕),然后复制给zoom。为了简化操作这里使用了jquery。结果如下:
ok,这样就可以基本满足要求了,如有其他问题请联系我,前端技术交流群:139761568
相关文章
- .gitignore == git添加忽略不生效解决方案
- VMware添加新硬盘及新添加的磁盘1显示脱机的解决方案
- Linux技巧--Redhat 5系统中的vim编辑器无法正常显示中文解决方案(中文显示为乱码)/Ubuntu 12.04系统gedit中文乱码
- WIN10打开资源管理器显示该文件没有与之关联的程序来执行该操作.请安装应用,请在“默认应用设置”..关联 —— 解决方案
- zepto的tap事件的点透问题的几种解决方案
- node.js实现国标GB28181设备接入的sip服务器解决方案
- Seata分布式事务落地解决方案
- [SharePoint 2010] SharePoint 2010 部署、收回和删除解决方案----STSADM和PowerShell
- SAP UI5 应用开发教程之九十四 - 基于 JSONModel 数据模型的 SAP UI5 列表控件分页显示数据的完整解决方案试读版
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
- 使用 SAP UI5 消费 OData 服务的一些常见错误和解决方案
- Android 状态栏为白色的时候图标不显示的解决方案
- 【SpringBoot笔记20】SpringBoot跨域问题之CORS的四种解决方案
- Android 12.0 内置app编译报错编不过的解决方案
- Android 9.0横屏旋转开机动画显示不全的解决方案
- [h5棋牌项目]-08-请安装所需的版本的 Windows SDK 或者在项目属性页的问题解决方案
- 【Lua】LuaForWindows_v5.1.4-46安装失败解决方案
- DB2 “The transaction log for the database is full” 存在的问题及解决方案
- 从自动化测试的演变,得出中小公司自动化测试解决方案