ユーザーの選択に基づいてポートのサイズを変更します

基本的には、メディアクエリのサイズ変更用のブートストラップ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

まず：あなたはメタ

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

第二のビューポートにIDを与える：作成選択ボタン

を

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

第四： seに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

ユーザーの選択に基づいてポートのサイズを変更します

答えて

関連する問題