問題描述
WP 4.5 引入了 Device Preview in the Customizer，它很容易使用。點擊三個圖標之一，並以各種 (預定) 尺寸查看您的網站。
-
桌面版將始終填滿 100％的屏幕
-
平板電腦版本設置為 6 英寸 x 9 英寸
-
移動版本設置為 320px x 480px
您還可以使用 customize_previewable_devices 過濾所有可用設備或將其全部刪除
add_filter( 'customize_previewable_devices', '__return_empty_array' );
有很多討論 @ #31195，但假設您可以添加/刪除 previewable devices 在哪裏確定這些視圖的大小？
有關為什麼更多品種更好的參考，請參考 http://design.google.com/resizer/。
器件定向解決方案
根據 Luis Sanz 的答案，我認為這個解決方案有點更加完整。它涉及添加新設備，設置圖標和調整列表中設備的順序。
雖然我覺得設置這些窗口的高度可以顯示縱向和橫向設置的區別很有趣，但我認為 100% 的高度在大多數情況下是最好的。
這些圖標目前正在使用 Dashicons，但我也可以看到將這些圖表交換出來，提示斷點而不是設備的路線。 [SM, M, L, XL]
/**
* Determine the device view size and icons in Customizer
*/
function wpse_20160503_adjust_customizer_responsive_sizes() {
$mobile_margin_left = '-240px'; //Half of -$mobile_width
$mobile_width = '480px';
$mobile_height = '720px';
$mobile_landscape_width = '720px';
$mobile_landscape_height = '480px';
$tablet_width = '720px';
$tablet_height = '1080px';
$tablet_landscape_width = '1080px';
$tablet_landscape_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-mobile-landscape .wp-full-overlay-main {
width: <?php echo $mobile_landscape_width; ?>;
height: <?php echo $mobile_landscape_height; ?>;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wp-customizer .preview-tablet .wp-full-overlay-main {
width: <?php echo $tablet_width; ?>;
height: <?php echo $tablet_height; ?>;
}
.wp-customizer .preview-tablet-landscape .wp-full-overlay-main {
width: <?php echo $tablet_landscape_width; ?>;
height: <?php echo $tablet_landscape_height; ?>;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.wp-full-overlay-footer .devices .preview-tablet-landscape:before {
content: "f167";
}
.wp-full-overlay-footer .devices .preview-mobile-landscape:before {
content: "f167";
}
</style>
<?php
}
add_action( 'customize_controls_print_styles', 'wpse_20160503_adjust_customizer_responsive_sizes' );
/**
* Set device button settings and order
*/
function wpse_20160503_filter_customize_previewable_devices( $devices )
{
$custom_devices[ 'desktop' ] = $devices[ 'desktop' ];
$custom_devices[ 'tablet' ] = $devices[ 'tablet' ];
$custom_devices[ 'tablet-landscape' ] = array (
'label' => __( 'Enter tablet landscape preview mode' ), 'default' => false,
);
$custom_devices[ 'mobile' ] = $devices[ 'mobile' ];
$custom_devices[ 'mobile-landscape' ] = array (
'label' => __( 'Enter mobile landscape preview mode' ), 'default' => false,
);
foreach ( $devices as $device => $settings ) {
if ( ! isset( $custom_devices[ $device ] ) ) {
$custom_devices[ $device ] = $settings;
}
}
return $custom_devices;
}
add_filter( 'customize_previewable_devices', 'wpse_20160503_filter_customize_previewable_devices' );
媒體查詢解決方案
以下是基於先前的設備定位解決方案，不需要額外字形的斷點 [L|M|S] 的示例。這些顯然應該是您的主題媒體查詢。
/**
* Determine the size of the devices and icons in Customizer
*/
function wpse_20160504_adjust_customizer_responsive_sizes() {
?>
<style>
.wp-customizer .preview-small .wp-full-overlay-main {
width: 320px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.wp-customizer .preview-medium .wp-full-overlay-main {
width: 768px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.wp-customizer .preview-large .wp-full-overlay-main {
width: 1224px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.wp-full-overlay-footer .devices .preview-small:before {
content: "S";
}
.wp-full-overlay-footer .devices .preview-medium:before {
content: "M";
}
.wp-full-overlay-footer .devices .preview-large:before {
content: "L";
}
</style>
<?php
}
add_action( 'customize_controls_print_styles', 'wpse_20160504_adjust_customizer_responsive_sizes' );
/**
* Add device sizes to customizer
*/
function wpse_20160504_filter_customize_previewable_devices( $devices )
{
$custom_devices[ 'desktop' ] = $devices[ 'desktop' ];
$custom_devices[ 'large' ] = array ( 'label' => __( 'Large' ) );
$custom_devices[ 'medium' ] = array ( 'label' => __( 'Medium' ) );
$custom_devices[ 'small' ] = array ( 'label' => __( 'Small' ) );
return $custom_devices;
}
add_filter( 'customize_previewable_devices', 'wpse_20160504_filter_customize_previewable_devices' );
最佳解決辦法
移動設備和平板電腦維度都在管理員的 themes.css 文件中定義。觸發按鈕時運行的 JavaScript 只是用於添加和刪除類，而不是處理大小本身。
所以通過添加一些額外的 CSS 來覆蓋這個維度並不難。為了保持簡單，我使用 customize_controls_print_styles 來嵌入一些樣式，但也可以通過排入一個 css 文件來完成。
<?php
/*
Plugin Name: Adjust Customizer responsive sizes
Description: Allows to change the mobile and tablet preview dimensions in the WP Customizer
Version: 0.1
Author: Your Name
Author URI: http://www.yourwebsite.com/
*/
if ( ! defined( 'ABSPATH' ) ) exit;
function wpse_223684_adjust_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', 'wpse_223684_adjust_customizer_responsive_sizes' );
?>
默認尺寸為移動版 320x480px，平板電腦為 720x1080px 。
編輯 16/04/26：反映了 WordPress 4.5.1 版本介紹的默認平板電腦大小的變化。
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。