diff --git a/sdk/demo/demo.html b/sdk/demo/demo.html
index 8aaaf45a08880b300866bad0fef86ad90a30e3f0..42dc9eaf88788a5714c61a0ef0c3d1d6fc850d1a 100644
--- a/sdk/demo/demo.html
+++ b/sdk/demo/demo.html
@@ -218,17 +218,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     .cancel-btn {
       border: none;
     }
-    #mobileNetworkDelay {
-      display: none;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 40px;
-      height: 40px;
-      text-align: center;
-      color: #3AC295;
-      z-index: 999;
-    }
     .slider {
       position: relative;
       width: 35px;
@@ -337,73 +326,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
               d="M39.496 6.969l3.535 3.536-7.78 7.777-3.534-3.536z" />
       </svg>
     </div>
-    <div id="network-info">
-      <div id="pcNetworkContent">
-        时延 <span id="pcNetworkDelay"></span>ms
-      </div>
-    </div>
-    <div class="message-modal" id="messageModal">
-      <div class="header-content">
-        <p>温馨提示</p>
-      </div>
-      <div class="body-content">
-        <p class="msg" id="msgContent"></p>
-      </div>
-      <div class="footer-content">
-        <button class="button-alone" onclick="closeModal()">退出</button>
-      </div>
-    </div>
-    <div class="exit-modal" id="exitModal">
-      <div class="header-content">
-        <p>温馨提示</p>
-      </div>
-      <div class="body-content">
-        <p class="msg" id="msgContent">确定退出吗？</p>
-      </div>
-      <div class="footer-content">
-        <button class="exit-btn" onclick="exitPhone()">退出</button>
-        <button class="cancel-btn" onclick="closeExitModal()">取消</button>
-      </div>
-    </div>
-    <div id="controlBtn" class="control-btn">
-      <span id="mobileNetworkDelay"></span>
-    </div>
-    <div id="buttonModal" class="button-modal">
-      <div class="radio-group">
-        <div class="UHD">
-          <input type="radio" name="clarity" id="UHD" value="UHD" onchange="radioChange(event)">
-          <label for="UHD">超清</label>
-        </div>
-        <div class="HD">
-          <input type="radio" name="clarity" id="HD" value="HD" checked="true" onchange="radioChange(event)">
-          <label for="HD">高清</label>
-        </div>
-        <div class="SD">
-          <input type="radio" name="clarity" id="SD" value="SD" onchange="radioChange(event)">
-          <label for="SD">流畅</label>
-        </div>
-      </div>
-      <div class="button-list">
-        <div class="button-network">
-          <div>时延</div>
-          <div class="slider" id="networkSlider">
-            <div class="slider-btn" id="networkSliderBtn"></div>
-          </div>
-        </div>
-        <div class="button-fullscreen" id="buttonFullscreen">
-          <div>全屏</div>
-          <div class="slider" id="toggleFullscreen">
-            <div class="slider-btn" id="fullscreenSliderBtn"></div>
-          </div>
-        </div>
-        <div class="button-exit" id="exitBtn" onclick="showExitModal()">退出云手机</div>
-      </div>
-      <div class="button-list">
-        <button class="back-btn" id="backBtn" onclick="sendKeyCodeBack()">返回</button>
-        <button class="home-btn" id="homeBtn" onclick="sendKeyCodeHome()">桌面</button>
-        <button class="list-btn" id="listBtn" onclick="sendKeyCodeMenu()">多任务</button>
-      </div>
-    </div>
   </div>
 
   <div class="message-modal" id="trustModal">
@@ -420,36 +342,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     </div>
   </div>
 </div>
-<div class="pc-button-list" id="pcButtonList">
-  <div class="clarity-btn">
-    <div class="radio-group-pc">
-      <div class="UHD">
-        <input type="radio" name="clarityPc" id="PCUHD" value="UHD" onchange="radioChange(event)">
-        <label for="PCUHD">超清</label>
-      </div>
-      <div class="HD">
-        <input type="radio" name="clarityPc" id="PCHD" value="HD" checked onchange="radioChange(event)">
-        <label for="PCHD">高清</label>
-      </div>
-      <div class="SD">
-        <input type="radio" name="clarityPc" id="PCSD" value="SD" onchange="radioChange(event)">
-        <label for="PCSD">流畅</label>
-      </div>
-      <div class="pc-slider-btn">
-        <div class="slider" id="pcNetworkSlider">
-          <div class="slider-btn pc-color" id="pcNetworkSliderBtn"></div>
-        </div>
-        <div class="mr-left-10">时延</div>
-      </div>
-    </div>
-  </div>
-  <div class="normal-btn">
-    <button onclick="sendKeyCodeBack()">返回</button>
-    <button onclick="sendKeyCodeHome()">桌面</button>
-    <button onclick="sendKeyCodeMenu()">多任务</button>
-    <button onclick="showExitModal()">退出云手机</button>
-  </div>
-</div>
 <script src="./common.js"></script>
 <script type="text/javascript">
   var phoneId = null;
@@ -580,7 +472,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       ...cloudPhoneParams,
       channelType: channelType,
       ticket: '256random'.padStart(256, '0'),
-      aes_key: '11111111111111111111111111111111',
+      // aes_key: '38cd1479423e42369f099661d3f61ee6',
+      aes_key: 'bdbf24c2c2db43c58b18e4232ada9026',
       auth_ts: 'test_auth_ts',
       _debug: true,
       auto_rotate: true,
@@ -620,11 +513,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         cloudapp.on("netStateChange", function (event, data) {
           let delayElement = null;
           if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-            delayElement = document.getElementById('mobileNetworkDelay');
           } else {
-            delayElement = document.getElementById('pcNetworkDelay');
           }
-          delayElement.innerHTML = data.delay;
         });
 
         // 时延开关
@@ -643,6 +533,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
           console.log(event, str)
         });
 
+        cloudapp.on('rotatePlayer', function (event, data) {
+          console.log(data.orientation)
+        });
+
         window.cloudapp = cloudapp;
         window.sendDataToCloudApp = function (str) {
           var utf8Array = encodeUTF8(str);
@@ -710,10 +604,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       showTrustModal(targetStr);
     }, error => {
       const errorMsg = error && JSON.parse(error).errorMsg;
-      const modalEle = document.getElementById('messageModal');
-      const msgEle = document.getElementById('msgContent');
-      msgEle.innerText = errorMsg;
-      modalEle.style.display = 'block';
     });
   }
 
@@ -723,15 +613,7 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     let sliderBtnEle = null;
     let sliderBtnBg = null;
     if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-      networkInfoElement = document.getElementById('mobileNetworkDelay');
-      sliderEle = document.getElementById('networkSlider');
-      sliderBtnEle = document.getElementById('networkSliderBtn');
-      sliderBtnBg = '#fff';
     } else {
-      networkInfoElement = document.getElementById('pcNetworkContent');
-      sliderEle = document.getElementById('pcNetworkSlider');
-      sliderBtnEle = document.getElementById('pcNetworkSliderBtn');
-      sliderBtnBg = '#eee';
     }
     
     sliderEle.addEventListener('click', () => {
@@ -740,21 +622,15 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
         sliderBtnEle.style.left = '15px';
         sliderEle.style.backgroundColor = '#a17c7f';
         sliderBtnEle.style.backgroundColor = '#85090c';
-        networkInfoElement.style.display = 'inline-block';
       } else {
         sliderBtnEle.style.left = '0px';
         sliderEle.style.backgroundColor = '#ccc';
         sliderBtnEle.style.backgroundColor = sliderBtnBg;
-        networkInfoElement.style.display = 'none';
       }
     });
   }
 
   function showExitModal() {
-    const buttonModalEle = document.getElementById('buttonModal');
-    const exitModalEle = document.getElementById('exitModal');
-    buttonModalEle.style.display = 'none';
-    exitModal.style.display = 'block';
   }
 
   function exitPhone() {
@@ -763,14 +639,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   }
 
   function closeExitModal() {
-    const exitModalEle = document.getElementById('exitModal');
-    exitModal.style.display = 'none';
   }
 
   function exit() {
     cloudapp.exit();
-    var networkInfoElement = document.getElementById('mobileNetworkDelay');
-    networkInfoElement.hidden = true;
 
     let isAppUse = false;
     try {
@@ -810,14 +682,10 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
 
   function sendKeyCodeHome() {
     cloudapp.home();
-    const buttonModalEle = document.getElementById('buttonModal');
-    buttonModalEle.style.display = 'none';
   }
 
   function sendKeyCodeMenu() {
     cloudapp.menu();
-    const buttonModalEle = document.getElementById('buttonModal');
-    buttonModalEle.style.display = 'none';
   }
 
   function setResolution() {
@@ -862,26 +730,9 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
     return decodeURIComponent(encodedStr);
   }
 
-  function showAlertModal(data) {
-    const modalEle = document.getElementById('messageModal');
-    const msgEle = document.getElementById('msgContent');
-    const startSuccessState = 512;
-    // 连接成功需要关闭已显示的弹框
-    if (data.state === startSuccessState) {
-      if(modalEle.style.display === 'block') {
-        modalEle.style.display = 'none';
-        return;
-      }
-    }
-    if (data.tip) {
-      msgEle.innerHTML = data.tip;
-      modalEle.style.display = 'block';
-    }
-  }
+  function showAlertModal(data) {}
 
   function closeModal() {
-    const modalEle = document.getElementById('messageModal');
-    modalEle.style.display = 'none';
     if (cloudapp) {
       exit();
     }
@@ -893,8 +744,6 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
       if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
         closeCtrlModal();
       } else {
-        let pcOperateBtn = document.getElementById('pcButtonList');
-        pcOperateBtn.style.display = 'flex';
       }
       
       try {
@@ -909,39 +758,8 @@ Copyright 2022 Huawei Cloud Computing Technology Co., Ltd.
   }
 
   function closeCtrlModal() {
-    const ctrlEle = document.getElementById('controlBtn');
-    const buttonModalEle = document.getElementById('buttonModal');
     const playContainer = document.querySelector('article');
     const playerElement = playContainer.shadowRoot.querySelector('#playCanvas') || playContainer.shadowRoot.querySelector('#phoenixVideo');
-    const fullscreenBtn = document.getElementById('buttonFullscreen');
-    ctrlEle.style.display = 'block';
-    ctrlEle.addEventListener('click', (event) => {
-      if(buttonModalEle.style.display !== 'block') {
-        buttonModalEle.style.display = 'block';
-      } else {
-        buttonModalEle.style.display = 'none';
-      }
-    });
-
-    if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
-      fullscreenBtn.style.display = 'flex';
-      playerElement.addEventListener('touchend', (event) => {
-        if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
-          buttonModalEle.style.display = 'none';
-        }
-      });
-    } else {
-      fullscreenBtn.style.display = 'none';
-      document.addEventListener('click', (event) => {
-        if(!buttonModalEle.contains(event.target) && !ctrlEle.contains(event.target)) {
-          buttonModalEle.style.display = 'none';
-        }
-      });
-    }
-
-    buttonModalEle.addEventListener('click', (event) => {
-      event.stopPropagation();
-    });
   }
 
   function trustHost() {
diff --git a/sdk/src/AppController.js b/sdk/src/AppController.js
index 658a0f4d5d3bee9553dbba29e6df8dd3d3d7b4d2..48e7f322e1894e148b85249c768574cdfe12f917 100644
--- a/sdk/src/AppController.js
+++ b/sdk/src/AppController.js
@@ -119,6 +119,7 @@ class AppController {
             'netStateChange',
             'appStateChange',
             'audioStateChange',
+            'rotatePlayer',
             'cloudAppData',
             'clipboardDataChange'
         ]);
@@ -179,7 +180,6 @@ class AppController {
             isMobile: this.options.isMobile
         });
         this.fullscreen.init();
-        this.triggerFullscreen();
     }
 
     sendKeyCodeMsg(keyCodeType) {
@@ -377,15 +377,6 @@ class AppController {
                 this.keyboardInput.getTouchHandler(this.touchHandler);
             }
 
-            if(this.touchHandler.displayBox.width && this.touchHandler.displayBox.height) {
-                const ctrlEle = document.getElementById('controlBtn');
-                const containerEle = document.getElementById('container');
-                const left = (containerEle.offsetWidth - this.touchHandler.displayBox.width)/2 + ctrlEle.clientWidth/2;
-                const top = (containerEle.offsetHeight - this.touchHandler.displayBox.height)/2 + ctrlEle.clientHeight * 2.5;
-                ctrlEle.style.top = `${top}px`;
-                ctrlEle.style.left = `${left}px`;
-                ctrlEle.style.userSelect = 'none';
-            }
             this.directionHandler = new DirectionHandler({
                 containerId: this.options.containerId,
                 isMobile: this.options.isMobile,
@@ -528,6 +519,7 @@ class AppController {
 
     updateResolutionAndTouch() {
         if (this.player && this.orientation) {
+            this.subscribe.trigger('rotatePlayer', { orientation: this.orientation });
             // resize之前更新canvas大小
             if (this.options.isMobile) {
                 this.directionHandler.updateMobileCanvasSize(this.orientation, this.isMSE);
@@ -1472,26 +1464,6 @@ class AppController {
         return this.fullscreen.isFullscreen();
     }
 
-    triggerFullscreen() {
-        const fullscreenBtn = document.getElementById('toggleFullscreen');
-        const sliderBtnEle = document.getElementById('fullscreenSliderBtn');
-        if (fullscreenBtn) {
-            fullscreenBtn.addEventListener('click', () => {
-                const left = sliderBtnEle.offsetLeft;
-                if (left === 0) {
-                    sliderBtnEle.style.left = '15px';
-                    fullscreenBtn.style.backgroundColor = '#a17c7f';
-                    sliderBtnEle.style.backgroundColor = '#85090c';
-                } else {
-                    sliderBtnEle.style.left = '0px';
-                    fullscreenBtn.style.backgroundColor = '#ccc';
-                    sliderBtnEle.style.backgroundColor = '#fff';
-                }
-                this.fullscreenToggle();
-            });
-        }
-    }
-
     setDefaultCamera(devId) {
       this.deviceHardwareHandler.setDefaultCamera(devId);
     }
diff --git a/sdk/src/AutoRotation.js b/sdk/src/AutoRotation.js
index ec565bd7ad4866c6ffa5f10d4e5b7a4fe66e7665..0f8ec3e994c834a19ca3a8436b0963f38ee5e230 100644
--- a/sdk/src/AutoRotation.js
+++ b/sdk/src/AutoRotation.js
@@ -84,16 +84,22 @@ export default class AutoRotation {
                 const deviceOrientation = this.getDeviceOrientation();
                 if ([DEVICE_ORIENTATION_ANGLES.PORTRAIT,DEVICE_ORIENTATION_ANGLES.REVERSE_PORTRAIT].includes(deviceOrientation)) {
                     if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[0]) {
-                        style = `
-                            -webkit-transform: none;
-                            -moz-transform: none;
-                            -ms-transform: none;
-                            transform: none;
-                            width: ${width}px;
-                            height: ${height}px;
-                            position: relative;
-                            top: 0px;
-                            left: 0px;
+                      playerWidth = width ;
+                      playerHeight = width / CLOUD_PHONE_RATIO;
+                      if(playerHeight > height) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                      }
+                      style = `
+                          -webkit-transform: none;
+                          -moz-transform: none;
+                          -ms-transform: none;
+                          transform: none;
+                          width: ${playerWidth}px;
+                          height: ${playerHeight}px;
+                          position: relative;
+                          top: ${(height - playerHeight)/2}px;
+                          left: ${(width - playerWidth)/2}px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[16]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
@@ -109,42 +115,32 @@ export default class AutoRotation {
                             left: 0px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
-                        playerWidth = width;
-                        playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                      playerWidth = width ;
+                      playerHeight = width / CLOUD_PHONE_RATIO;
+                      if(playerHeight > height) {
+                        playerWidth = height * CLOUD_PHONE_RATIO;
+                        playerHeight = height;
+                      }
                         style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: left;
-                            -moz-transform-origin: left;
-                            -ms-transform-origin: left;
-                            transform-origin: left;
-                            width: ${playerHeight}px;
-                            height: ${playerWidth}px;
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
                             position: relative;
                             top: ${(height - playerHeight)/2}px;
-                            left: ${playerWidth/2}px;
+                            left: ${(width - playerWidth)/2}px;
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
-                        playerWidth = width;
-                        playerHeight = playerWidth * CLOUD_PHONE_RATIO;
-                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
                         style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: top;
-                            -moz-transform-origin: top;
-                            -ms-transform-origin: top;
-                            transform-origin: top;
-                            width: ${playerHeight}px;
-                            height: ${playerWidth}px;
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
                             position: relative;
-                            top: ${(height - playerHeight)/2 + playerHeight/2}px;
-                            left: ${playerWidth - playerHeight/2}px;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
                         `;
                     }
                 } else if([DEVICE_ORIENTATION_ANGLES.LANDSCAPE, DEVICE_ORIENTATION_ANGLES.REVERSE_LANDSCAPE].includes(deviceOrientation)) {
@@ -179,32 +175,29 @@ export default class AutoRotation {
                         `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[8]) {
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
                         style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: left;
-                            -moz-transform-origin: left;
-                            -ms-transform-origin: left;
-                            transform-origin: left;
-                            width: ${height}px;
-                            height: ${width}px;
+                            width: ${playerWidth}px;
+                            height: ${playerHeight}px;
                             position: relative;
-                            top: ${height - width/2}px;
-                            left: ${width/2}px;
-                        `;
+                            top: ${(height - playerHeight)/2}px;
+                            left: ${(width - playerWidth)/2}px;
+                          `;
                     } else if (this.orientation === PROTOCOL_CONFIG.ORIENTATION[24]) {
+                        rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
+                        playerWidth = width ;
+                        playerHeight = width / CLOUD_PHONE_RATIO;
+                        if(playerHeight > height) {
+                          playerWidth = height * CLOUD_PHONE_RATIO;
+                          playerHeight = height;
+                        }
                         rotateDegrees = ORIENTATION_DEGRESS[this.orientation];
                         style = `
-                            -webkit-transform: rotate(${rotateDegrees}deg);
-                            -moz-transform: rotate(${rotateDegrees}deg);
-                            -ms-transform: rotate(${rotateDegrees}deg);
-                            transform: rotate(${rotateDegrees}deg);
-                            -webkit-transform-origin: top;
-                            -moz-transform-origin: top;
-                            -ms-transform-origin: top;
-                            transform-origin: top;
                             width: ${height}px;
                             height: ${width}px;
                             position: relative;
diff --git a/sdk/src/DirectionHandler.js b/sdk/src/DirectionHandler.js
index b87c713c6cea96f3c9811229e07927f20771c898..9d989c081fbf041770c8808e26eaf79d1bad2fc0 100644
--- a/sdk/src/DirectionHandler.js
+++ b/sdk/src/DirectionHandler.js
@@ -45,12 +45,30 @@ class DirectionHandler {
         this.touchHandler = this.options.touchHandler;
 
         this.containerEle = document.getElementById(this.options.containerId);
-        this.netWorkInfo = document.getElementById('network-info');
-        this.messageModal = document.getElementById('messageModal');
-        this.exitModal = document.getElementById('exitModal');
-        this.buttonModal = document.getElementById('buttonModal');
-        this.ctrlEle = document.getElementById('controlBtn');
-        this.keyboardInputContent = document.getElementById('keyboardInputContent');
+        this.netWorkInfo = {
+          clientHeight: 0,
+          clientWidth: 0 
+        };
+        this.messageModal = {
+          width: '0px',
+          height: '0px'
+        };
+        this.buttonModal = {
+          width: '0px',
+          height: '0px'
+        };
+        this.ctrlEle = {
+          clientHeight: 0,
+          clientWidth: 0 
+        };
+        if (this.options.isMobile) {
+          this.keyboardInputContent = {
+             width: '0px',
+             height: '0px'
+          }
+        } else {
+          this.keyboardInputContent = document.getElementById('keyboardInputContent');
+        }
     }
 
     init() {
@@ -97,21 +115,11 @@ class DirectionHandler {
                 let ctrlEleLeft = this.ctrlEle.clientWidth/2;
                 let ctrlEleTop = this.netWorkInfo.clientHeight * 2.5;
                 this.portraitAndportrait(ctrlEleLeft, ctrlEleTop);
-                if (this.keyboardInputContent) {
-                    this.keyboardInputContent.style.cssText = `
-                    display: ${this.currentDisplay ? this.currentDisplay : 'none'};
-                    position: absolute;
-                    top: 50%;
-                    left: 0px;
-                    height: 40px;
-                    width: 100%;
-                    `;
-                }
                 break;
             case PROTOCOL_CONFIG.ORIENTATION[16]:
-                const keyboardInputLeft = this.containerEle.clientWidth;
-                const keyboardInputTop = this.containerEle.clientHeight/2 - this.keyboardInputContent.clientHeight;
-                this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
+                // const keyboardInputLeft = this.containerEle.clientWidth;
+                // const keyboardInputTop = this.containerEle.clientHeight/2 - this.keyboardInputContent.clientHeight;
+                // this.portraitAndReversePortrait(keyboardInputLeft, keyboardInputTop, PROTOCOL_CONFIG.ORIENTATION[16]);
             break;
             case PROTOCOL_CONFIG.ORIENTATION[8]:
                 this.portraitAndReverseLandscapeMobile(PROTOCOL_CONFIG.ORIENTATION[8]);
@@ -143,43 +151,7 @@ class DirectionHandler {
             transform: rotate(${positionParams.transformAngle}deg);
             transform-origin: left top;
         `;
-        this.messageModal.style.cssText = transformCssText;
-        this.exitModal.style.cssText = transformCssText;
-        this.netWorkInfo.style.cssText = `
-            transform-origin: left;
-            -webkit-transform: rotate(${positionParams.transformAngle}deg);
-            -moz-transform: rotate(${positionParams.transformAngle}deg);
-            -ms-transform: rotate(${positionParams.transformAngle}deg);
-            -o-transform: rotate(${positionParams.transformAngle}deg);
-            transform: rotate(${positionParams.transformAngle}deg);
-            pointer-events: none;
-            position: absolute;
-            left: ${positionParams.netWorkInfoLeft}px;
-            top: ${positionParams.netWorkInfoTop}px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: ${positionParams.netWorkInfoWidth}px;
-            color: #3AC295;
-        `;
-        this.buttonModal.style.cssText = `
-            -webkit-transform: rotate(${positionParams.transformAngle}deg);
-            -moz-transform: rotate(${positionParams.transformAngle}deg);
-            -ms-transform: rotate(${positionParams.transformAngle}deg);
-            -o-transform: rotate(${positionParams.transformAngle}deg);
-            transform-origin: left top;
-            transform: rotate(${positionParams.transformAngle}deg);
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: ${positionParams.buttonModalTop}px;
-            left: ${positionParams.buttonModalLeft}px;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-        `;
-        if (this.keyboardInputContent) {
+        if (this.keyboardInputContent && !this.options.isMobile) {
             this.keyboardInputContent.style.cssText = `
                 display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
                 -webkit-transform: rotate(${positionParams.transformAngle}deg);
@@ -196,42 +168,11 @@ class DirectionHandler {
             `;            
         }
 
-        this.ctrlEle.style.top = `${positionParams.ctrlEleTop}px`;
-        this.ctrlEle.style.left = `${positionParams.ctrlEleLeft}px`;
-        this.ctrlEle.style.transform = `rotate(${positionParams.transformAngle}deg)`;
-        this.ctrlEle.style.transformOrigin = 'top';
     }
 
     // 设备不旋转，流不旋转
     portraitAndportrait(ctrlEleLeft, ctrlEleTop) {
-        this.messageModal.style.cssText = normalCssText;
-        this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: 100%;
-            color: #3AC295;
-        `;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
 
-        this.ctrlEle.style.top = `${ctrlEleTop}px`;
-        this.ctrlEle.style.left = `${ctrlEleLeft}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     // 设备不旋转，流旋转180
@@ -239,10 +180,10 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = (this.containerEle.clientWidth -  this.netWorkInfo.clientWidth)/2 + this.netWorkInfo.clientWidth;
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight;
-        const commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
-        const commonTop =this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;
-        const buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
-        const buttonModalTop = this.containerEle.clientHeight/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0])/2;
+        const commonLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number(this.messageModal.width.split('px')[0]) + (this.displayBox.width - Number(this.messageModal.width.split('px')[0]))/2;
+        const commonTop =this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
+        const buttonModalLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + Number((this.buttonModal).width.split('px')[0]) + (this.displayBox.width - Number((this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalTop = this.containerEle.clientHeight/2 + Number(this.messageModal.height.split('px')[0])/2;
         const ctrlEleTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight * 2.5;
         const ctrlEleLeft = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientWidth * 1.5;
         const netWorkInfoWidth = this.containerEle.clientWidth;
@@ -272,10 +213,10 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
-        const commonLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
-        const buttonModalLeft = this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
+        const commonLeft = this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]);
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
+        const buttonModalLeft = this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]);
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.netWorkInfo.clientHeight;
         const ctrlEleLeft = this.containerEle.clientWidth - this.ctrlEle.clientHeight * 2.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -315,18 +256,15 @@ class DirectionHandler {
         const netWorkInfoLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight;
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
         const commonLeft = this.containerEle.clientWidth;
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
         const buttonModalLeft = this.containerEle.clientWidth;
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
         const ctrlEleTop = this.ctrlEle.clientHeight;
         const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 3.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
         let keyboardInputLeft;
         let keyboardInputTop;
         if(this.keyboardInputContent) {
-            keyboardInputLeft = this.containerEle.clientWidth/2 - this.keyboardInputContent.clientHeight;
-            keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
-        } else {
             keyboardInputLeft = 0;
             keyboardInputTop = 0;
         }
@@ -355,10 +293,10 @@ class DirectionHandler {
         const transformAngle = DOM_ORIENTATION_ANGLES[orientationStr];
         const netWorkInfoLeft = this.netWorkInfo.clientHeight;
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
-        const commonLeft = (this.displayBox.height - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
-        const commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
-        const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
-        const buttonModalLeft = (this.displayBox.height - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
+        const commonLeft = (this.displayBox.height - Number(this.messageModal.height.split('px')[0]))/2;
+        const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
+        const buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
+        const buttonModalLeft = (this.displayBox.height - Number((this.buttonModal).height.split('px')[0]))/2;
         const ctrlEleTop = (this.containerEle.clientHeight - this.displayBox.width)/2 + this.displayBox.width - this.ctrlEle.clientHeight;
         const ctrlEleLeft = this.netWorkInfo.clientHeight * 1.5;
         const netWorkInfoWidth = this.containerEle.clientHeight;
@@ -390,9 +328,9 @@ class DirectionHandler {
         const windowHeight = document.documentElement.clientHeight;
         const netWorkInfoLeft = -((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight/2);
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
-        const buttonModalTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0])}`;
+        const buttonModalTop = `${(this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0])}`;
         const buttonModalLeft = 0;
-        const commonTop = `${(this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0])}`;
+        const commonTop = `${(this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0])}`;
         const commonLeft = 0;
         const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
         const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.netWorkInfo.clientHeight * 2);
@@ -439,45 +377,15 @@ class DirectionHandler {
     // 设备横屏，流旋转0
     landscapeAndPortrait() {
         const clientWidth = document.documentElement.clientWidth;
-        this.messageModal.style.cssText = normalCssText;
-        this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            left: ${-(document.documentElement.clientWidth - this.containerEle.clientWidth)/2}px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: ${document.documentElement.clientWidth}px;
-            color: #3AC295;
-        `;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
-        this.keyboardInputContent.style.cssText = `
-            display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
-            position: absolute;
-            top: 0px;
-            left: ${-(clientWidth - this.containerEle.clientWidth)/2}px;
-            height: 40px;
-            width: ${clientWidth}px;
-            `;
+        // this.keyboardInputContent.style.cssText = `
+        //     display:  ${this.currentDisplay ? this.currentDisplay : 'none'};
+        //     position: absolute;
+        //     top: 0px;
+        //     left: ${-(clientWidth - this.containerEle.clientWidth)/2}px;
+        //     height: 40px;
+        //     width: ${clientWidth}px;
+        //     `;
 
-        const left = this.ctrlEle.clientWidth/2;
-        const top = this.netWorkInfo.clientHeight * 2.5;
-        this.ctrlEle.style.top = `${top}px`;
-        this.ctrlEle.style.left = `${left}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     // 设备横屏，流旋转-90
@@ -489,13 +397,13 @@ class DirectionHandler {
         const netWorkInfoTop = -this.netWorkInfo.clientHeight/2;
         const ctrlEleTop = this.ctrlEle.clientHeight;
         const ctrlEleLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - this.netWorkInfo.clientHeight * 2.5;
-        const commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).height.split('px')[0]);
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2;
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2;
-        const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2 + Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]);
+        const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2 + Number(this.messageModal.height.split('px')[0]);
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2;
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2;
+        const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2 + Number((this.buttonModal).height.split('px')[0]);
         const netWorkInfoWidth = this.containerEle.clientHeight;
-        const keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0]/2);
-        const keyboardInputTop = -Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
+        const keyboardInputLeft = (windowHeight - this.containerEle.clientWidth)/2 + this.containerEle.clientWidth - Number(this.keyboardInputContent.height.split('px')[0]/2);
+        const keyboardInputTop = -Number(this.keyboardInputContent.height.split('px')[0])/2;
         const keyboardInputWidth = windowWidth;
 
         const positionParams = {
@@ -526,13 +434,13 @@ class DirectionHandler {
         const netWorkInfoTop = this.containerEle.clientHeight - this.netWorkInfo.clientHeight/2;
         const ctrlEleTop = this.containerEle.clientHeight - this.ctrlEle.clientHeight;
         const ctrlEleLeft =-((windowHeight - this.containerEle.clientWidth)/2 - this.ctrlEle.clientWidth);
-        const commonLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.messageModal).height.split('px')[0]))/2;
-        const commonTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.messageModal).width.split('px')[0]))/2 + Number(window.getComputedStyle(this.messageModal).width.split('px')[0]);
-        const buttonModalTop = (this.containerEle.clientHeight - Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]))/2 +  Number(window.getComputedStyle(this.buttonModal).width.split('px')[0]);
-        const buttonModalLeft = (this.containerEle.clientWidth - Number(window.getComputedStyle(this.buttonModal).height.split('px')[0]))/2;
+        const commonLeft = (this.containerEle.clientWidth - Number(this.messageModal.height.split('px')[0]))/2;
+        const commonTop = (this.containerEle.clientHeight - Number(this.messageModal.width.split('px')[0]))/2 + Number(this.messageModal.width.split('px')[0]);
+        const buttonModalTop = (this.containerEle.clientHeight - Number((this.buttonModal).width.split('px')[0]))/2 +  Number((this.buttonModal).width.split('px')[0]);
+        const buttonModalLeft = (this.containerEle.clientWidth - Number((this.buttonModal).height.split('px')[0]))/2;
         const netWorkInfoWidth = this.containerEle.clientHeight;
-        const keyboardInputLeft = Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
-        const keyboardInputTop = windowWidth - Number(window.getComputedStyle(this.keyboardInputContent).height.split('px')[0])/2;
+        const keyboardInputLeft = Number(this.keyboardInputContent.height.split('px')[0])/2;
+        const keyboardInputTop = windowWidth - Number(this.keyboardInputContent.height.split('px')[0])/2;
         const keyboardInputWidth = windowWidth;
 
         const positionParams = {
@@ -591,31 +499,7 @@ class DirectionHandler {
     }
 
     cancelTransform() {
-        this.messageModal.style.cssText = normalCssText;
-        this.exitModal.style.cssText = normalCssText;
-        this.netWorkInfo.style.cssText = `
-            pointer-events: none;
-            position: absolute;
-            top: 0px;
-            height: 40px;
-            line-height: 40px;
-            text-align: center;
-            width: 100%;
-            color: #3AC295;
-        `;
-        this.buttonModal.style.cssText = `
-            display: none;
-            width: 255px;
-            height: 175px;
-            position: absolute;
-            z-index: 999;
-            top: 50%;
-            left: 50%;
-            background-color: rgba(0, 0, 0, 0.4);
-            border-radius: 5px;
-            transform: translate(-50%, -50%);
-        `;
-        if (this.keyboardInputContent) {
+        if (this.keyboardInputContent && !this.options.isMobile) {
             this.keyboardInputContent.style.cssText = `
             display: none;
             position: absolute;
@@ -626,11 +510,6 @@ class DirectionHandler {
             `;
         }
 
-        const left = (this.containerEle.clientWidth - this.displayBox.width)/2 + this.ctrlEle.clientWidth/2;
-        const top = (this.containerEle.clientHeight - this.displayBox.height)/2 + this.netWorkInfo.clientHeight * 2.5;
-        this.ctrlEle.style.top = `${top}px`;
-        this.ctrlEle.style.left = `${left}px`;
-        this.ctrlEle.style.transform = 'none';
     }
 
     updateCanvasSize(orientation, isMSE) {
diff --git a/sdk/src/TouchHandler.js b/sdk/src/TouchHandler.js
index 22859f16c0d6616c7169162b0e619005c0b1e818..6aec4368da885093558d67539ac0f59a26efb275 100644
--- a/sdk/src/TouchHandler.js
+++ b/sdk/src/TouchHandler.js
@@ -503,7 +503,7 @@ export default class TouchHandler {
         }
         let finalOrientation;
         if (this.isMobile) {
-            finalOrientation = ORIENTATION_ORIGIN_MOBILE[this.orientation];
+            finalOrientation = 0;
         } else {
             finalOrientation = ORIENTATION_ORIGIN[this.orientation];
         }