問題描述
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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。