横屏[email protected]
<!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,
width:height,
transform:‘translate( ‘+ ((width-height)/2) +‘px,‘+ ((height-width)/2) +‘px) rotate(90deg)‘
});
});
$window.resize();
})
</script>
</body>
</html>
博文中不能存在js代码，点这里查看
原理：把一个和屏幕大小一样的div移动到屏幕中心再旋转90度就好了，还是非常简单的。
局限：尺寸只能小于等于屏幕，不然就出滚动条了，这个可以考虑自建滚动条解决，较为麻烦，因为我们就是一个和屏幕相当全屏的页面，所以就不管了。
By:AepKill
时间： 2024-08-04 01:53:05