WPカスタマイザのサイトプレビューの幅を調整するiframe

Question

開発中のテーマのWPカスタマイザオプションを作成しています。サイトのプレビューiframeに問題があります。

デスクトップ上の自分のサイトのオリジナルの幅は1170ピクセルです。私のMacBook 13インチのRetinaディスプレイで、WordPressカスタマイザでWordPress DashboardからAppearance> Customizeに移動してサイトを開くと、サイトプレビューiframeに表示されるようにサイトの幅が980ピクセルに縮小されます。したがって、カスタマイザのUIには、Webサイトのタブレット（幅< 981px）のみが表示されます。

サイトのプレビューiframeのサイズを変更する方法はありますか？そのため、カスタマイズされたデスクトップの完全版が表示されます。

Answer 1

まあサイズの設定は、だからだから今、あなたのテーマのfunctions.php（にこれを追加しcustomize_controls_print_styles

を使用することができ、それらを上書きするのwp-adminの/ CSS/themes.css内

を定義していますあなたは、設定で混乱が

function my_customizer_responsive_sizes() { 

    $mobile_margin_left = '-240px'; //Half of -$mobile_width 
    $mobile_width = '480px'; 
    $mobile_height = '720px'; 

    $tablet_margin_left = '-540px'; //Half of -$tablet_width 
    $tablet_width = '1080px'; 
    $tablet_height = '720px'; 

    ?> 
    <style> 
     .wp-customizer .preview-mobile .wp-full-overlay-main { 
      margin-left: <?php echo $mobile_margin_left; ?>; 
      width: <?php echo $mobile_width; ?>; 
      height: <?php echo $mobile_height; ?>; 
     } 

     .wp-customizer .preview-tablet .wp-full-overlay-main { 
      margin-left: <?php echo $tablet_margin_left; ?>; 
      width: <?php echo $tablet_width; ?>; 
      height: <?php echo $tablet_height; ?>; 
     } 
    </style> 
    <?php 
    } 

add_action('customize_controls_print_styles', 'my_customizer_responsive_sizes'); 

そして、ここではあなたのための1以上helpful linkである）ことができます。 楽しいことを：