首頁 > 開發者 > CSS

頁面強制橫屏

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
最近公司要開發一個移動端的養成類網頁遊戲（就是用手點各種按鈕最後你會找到一個女朋友=。=），要求橫屏顯示，不能豎屏。
有經驗的你肯定知道，當使用者豎屏開啟時，提示說你要把手機轉過來是在是件很傻×的事情。這時如果使用者沒開啟手機裡的橫屏模式，還要逼使用者去開啟。這時候使用者早就不耐煩的把你的遊戲關掉了。
我先進行了調研，想看有沒有現成的api。參考過screen的api以及manifest方法 ，實驗結果當然是不行。
那麼現在我唯一能想到的解決辦法，就是在豎屏模式下，寫一個橫屏的p，然後把它轉過來。

好了我的測試頁面結構如下：

<body class="webpBack">  <p id="print">      <p>lol</p>     </p></body>

很簡單對不對，最終的理想狀態是，把lol非常和諧的橫過來。
好了來看看區分橫屏豎屏的css：

@media screen and (orientation: portrait) {      html{         width : 100% ;         height : 100% ;          background-color: white ;          overflow : hidden;      }      body{          width : 100% ;         height : 100% ;         background-color: red ;          overflow : hidden;      }      #print{         position : absolute ;         background-color: yellow ;      }} @media screen and (orientation: landscape) {       html{         width : 100% ;         height : 100% ;         background-color: white ;      }        body{          width : 100% ;         height : 100% ;         background-color: white ;      }           #print{            position : absolute ;            top : 0 ;             left : 0 ;            width : 100% ;            height : 100% ;            background-color: yellow ;         }}#print p{        margin: auto ;        margin-top : 20px ;        text-align: center;      }

說白了，是要把print這個p在豎屏模式下橫過來，橫屏狀態下不變。所以在portrait下，沒定義它的寬高。會通過下面的js來補。

  var width = document.documentElement.clientWidth;  var height =  document.documentElement.clientHeight;  if( width < height ){      console.log(width + " " + height);      $print =  $('#print');      $print.width(height);       $print.height(width);      $print.css('top',  (height-width)/2 );      $print.css('left',  0-(height-width)/2 );      $print.css('transform' , 'rotate(90deg)');       $print.css('transform-origin' , '50% 50%'); }

在這裡我們先取得了螢幕內可用性區域域的寬高，然後根據寬高的關係來判斷是橫屏還是豎屏。如果是豎屏，就把print這個p的寬高設定下，對齊，然後旋轉。
最終效果如下：


豎屏


橫屏

最後，這麼做帶來的後果是，如果使用者手機的旋轉螢幕按鈕開著，那麼當手機橫過來之後，會造成一定的悲劇。解決辦法如下:

 var evt = "onorientationchange" in window ? "orientationchange" : "resize";    window.addEventListener(evt, function() {        console.log(evt);        var width = document.documentElement.clientWidth;         var height =  document.documentElement.clientHeight;          $print =  $('#print');         if( width > height ){            $print.width(width);            $print.height(height);            $print.css('top',  0 );            $print.css('left',  0 );            $print.css('transform' , 'none');            $print.css('transform-origin' , '50% 50%');         }         else{            $print.width(height);            $print.height(width);            $print.css('top',  (height-width)/2 );            $print.css('left',  0-(height-width)/2 );            $print.css('transform' , 'rotate(90deg)');            $print.css('transform-origin' , '50% 50%');         }    }, false);

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More