首页 > 代码库 > DOM元素全屏显示解决方案(续)
DOM元素全屏显示解决方案(续)
前一篇中实现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
DOM元素全屏显示解决方案(续)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。