首页 > 代码库 > 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元素全屏显示解决方案(续)