根據用戶選擇查看端口大小調整

基本上我有一個基於bootstrap 3的角度項目來調整媒體查詢大小。根據用戶選擇查看端口大小調整

我打算做的是讓用戶以桌面模式（筆記本電腦整個屏幕寬度）或移動模式（介質寬度< 667px）之間切換。

我看到很多主題預覽網站都有這個功能。由於這是一個相當普遍的特徵，我期望可以通過這種方式來完成，但不知道它是如何實現的。

注意：我不期望改變任何現有的CSS的一部分。

我對如何實現這一點的意見。

<html ng-viewport="deviceWidth"> 
    <button ng-click="changeDeviceWidth()"> 
</html> 

// initial 
$scope.deviceWidth = getDeviceWidthFunction(); 
$scope.changeDeviceWidth = function (deviceWidth) { 
    $scope.deviceWidth = deviceWidth; 
}

來源

2016-10-01 stackdisplay

第一：給ID爲您視口元

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">

二：創建選擇按鈕

<div id="selecter"> 
    <button onclick="toDesktop()"> Desktop</button> 
    <button onclick="toTablet()"> Tablet</button> 
    <button onclick="toMobile()"> Mobile</button> 
    </div>

三：添加iframe和內容收視

  <iframe id="mycontent" src="http://www.majali.net"></iframe>

四：向JS添加JS函數噸視口，內容的寬度和高度

  <script> 
      function toDesktop() { 
       document.getElementById("viewport").setAttribute("content", "width=1200"); 
       document.getElementById("mycontent").style.width='100%'; 
       document.getElementById("mycontent").style.height='600px';     
      } 

      function toMobile() { 
       document.getElementById("viewport").setAttribute("content", "width=340"); 
       document.getElementById("mycontent").style.width='320px'; 
       document.getElementById("mycontent").style.height='480px'; 
      }  

      function toTablet() { 
       document.getElementById("viewport").setAttribute("content", "width=767"); 
       document.getElementById("mycontent").style.width='767px'; 
       document.getElementById("mycontent").style.height='600px'; 
      }       
     </script>

來源

2016-10-02 07:47:34 majali

根據用戶選擇查看端口大小調整

回答

相關問題