DOM元素全屏显示解决方案（续）

标签：解决方案   dom   jquery   

      前一篇中实现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元素全屏显示解决方案（续）

标签：解决方案   dom   jquery   

原文地址：http://blog.csdn.net/xiebaochun/article/details/41542791