横屏Test@AepKill
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <style type="text/css"> body{ margin: 0; padding: 0; overflow: hidden; } </style> <title>TEST @ AepKill</title> <script src="./js/jquery-1.11.1.min.js"></script> </head> <body> <div class="wrap" id="wrap"> <span>横屏啦啦啦</span> </div> <script> $(function(){ var $window=$(window); $window.on('resize',function(){ var height=$window.height(),width=$window.width(),tX,tY; $('#wrap').css({ height:width, height, transform:'translate( '+ ((width-height)/2) +'px,'+ ((height-width)/2) +'px) rotate(90deg)' }); }); $window.resize(); }) </script> </body> </html>
原理:把一个和屏幕大小一样的div移动到屏幕中心再旋转90度就好了,还是非常简单的。
局限:尺寸只能小于等于屏幕,不然就出滚动条了,这个可以考虑自建滚动条解决,较为麻烦,因为我们就是一个和屏幕相当全屏的页面,所以就不管了。
By:AepKill