问题描述
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 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。