標籤：
橫屏[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
行動瀏覽器橫屏
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
