<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          移動端如何強制頁面橫屏

          時間:?2017-12-20閱讀:?2465標簽:?移動端

          背景

          最近公司要開發一個移動端的類網頁游戲: 長按按鈕有個自行車一直騎行,碰到某個國家的地標就彈出該國的相應say hello的tip,要求橫屏顯示,不能豎屏。

          然而當用戶豎屏打開時,而且沒開啟手機里的橫屏模式,還要逼用戶去開啟。這時候用戶早就不耐煩的把你的游戲關掉了。

          而且有些機型有些app不能橫屏:比如Android的微信就沒有橫屏模式,而ios的微信能開啟橫屏模式。

          解決辦法就是在豎屏模式下,寫一個橫屏的div,然后設置rotate正(負)90度,把他旋轉過來;而且如果用戶切到橫屏時,需要把rotate復原,要求也能正常展現。


          純css

          把main這個div在豎屏模式下橫過來,橫屏狀態下不變。

          @media screen and (orientation: portrait) {
              .main {
                  -webkit-transform:rotate(-90deg);
                  -moz-transform: rotate(-90deg);
                  -ms-transform: rotate(-90deg);
                  transform: rotate(-90deg);
                  width: 100vh;
                  height: 100vh;
                  /*去掉overflow 微信顯示正常,但是瀏覽器有問題,豎屏時強制橫屏縮小*/
                  overflow: hidden;
              }
          }
          
          @media screen and (orientation: landscape) {
              .main {
                  -webkit-transform:rotate(0);
                  -moz-transform: rotate(0);
                  -ms-transform: rotate(0);
                  transform: rotate(0)
              }
          }

          但是有個問題是在橫屏模式下,利用css旋轉90度后,寬和高不好控制。 

          width: 100vh;
          height: 100vh;

          這樣控制寬高不太適合單屏寬高的頁面。 


          js計算寬高、對齊、旋轉

          上文提到了,在portrait下,旋轉到橫屏后寬和高會有問題。可以通過下面的js來實現。 

          var width = document.documentElement.clientWidth;
          var height =  document.documentElement.clientHeight;
          if( 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%');
          }

          需要注意的是transform-origin是50% 50%,旋轉90deg后,還需要重新設置top和left將其對齊。


          最終方案

          如果用戶手機的旋轉屏幕按鈕開著,那么當手機橫過來之后,上面的代碼還是有問題。

          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);


          完整代碼

          /**
           * 橫豎屏
           * @param {Object}
           */
          function changeOrientation($print) {  
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
            if(width < height) {
          	  $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%');
            } 
            var evt = "onorientationchange" in window ? "orientationchange" : "resize";
                window.addEventListener(evt, function() {
          	  setTimeout(function() {
          	      var width = document.documentElement.clientWidth;
          	      var height =  document.documentElement.clientHeight;
          	      // 刷新城市的寬度
          	      initCityWidth();
          	      // 初始化每個氣泡和自行車碰撞的距離
          	      cityCrashDistanceArr = initCityCrashDistance();
          	
          		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%');
          		 }
          	}, 300);	
             }, false);
          }

          總結

          該方案只適合頁面寬高占一屏,不適合可以滾動的方案,用orientationchange和resize監聽橫豎屏切換會有延遲的問題,具體解決延遲的方案見我的另外一篇文章js實現手機橫豎屏事件
          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/263

          總結幾個移動端H5軟鍵盤的大坑

          部分機型軟鍵盤彈起擋住原來的視圖解決方法:可以通過監聽移動端軟鍵盤彈起,Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。參數如下。

          js判斷pc端和手機端

          js判斷是否為移動端代碼,獲取用戶userAgent代理頭的值,進行匹配判斷,如果匹配到就進行跳轉到移動端。查看當前代理頭信息在瀏覽器中按F12進入調試模式,查看請求

          移動端H5頁面開發坑點指南

          在平時的H5移動端開發時,我們難免會遇到各種各樣的坑點,這篇文章就帶著大家來看看怎么解決,文章較長,建議收藏方便以后查閱!canvas在retina屏模糊只需要將畫筆根據像素比縮放即可

          整理經常在H5移動端開發遇到的知識

          viewport、強制瀏覽器全屏、IOS的Web APP模式、可點擊元素出現陰影(這個我覺得真沒必要去掉,用戶點擊是需要反饋的,而這個背景色剛剛好提供了一種反饋),本篇文章主要是講一些其他的或者優化手段。內容不多

          移動端的3種適配方法

          做移動端頁面以來,經常會聽說移動端的適配這個問題,但是并沒有認真分析過是如何適配各種機型的。目前公司用的是手淘的flexible.js進行頁面適配的。適配的根本原理其實就是將設計稿按一定的比例在不同的手機上實現

          移動端適配的兩種方案及flexible和px2rem-loader在webpack下的配置

          方案一:使用lib-flexible包:使用flexible包方式,安裝 lib-flexible 包和 px2rem-loader包;方案二:使用less或者sass等CSS 預處理語言寫適配方案:基準按照設計圖尺寸,但是缺點是不通用,不同頁面可能設計圖基準尺寸不同

          移動端縮放解決方案 hammerjs

          本方案適合各種前端成熟框架,以 ionic3為例子,第一步 安裝 hammerjs:npm install hammerjs;第二步 寫核心縮放功能

          移動端實現表頭固定,tbody滾動的三種方法

          實現表頭固定,tbody垂直滾動。準備工作:獲取頁面可是區域高度。方法一:兩個table,第一個table放表頭,第二個table方內容,通過JS實現監聽滾動事件,動態控制表頭位置

          移動端數字鍵盤遇到的知識點

          ios 點擊事件會出現閃屏效果,解決方法。click事件的300ms延遲響應,touch會有穿透效果。js判斷小數點的位數

          vconsole_移動端h5開啟控制臺的實現

          開發內嵌在 web,可能會遇到意想不到的 bug,所以你需要你能在手機上查看的控制臺。前用的是chrome的inspect調試,但是只能使用移動版的chrome查看數據,兼容不好,所以最近使用了vConsole 進行調試。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网