[wp-trac] [WordPress Trac] #31195: Add a user-friendly way to preview site responsiveness in the Customizer

[WordPress Trac]

#31195: Add a user-friendly way to preview site responsiveness in the Customizer
--------------------------+------------------------------------------------
 Reporter:                |       Owner:
  celloexpressions        |      Status:  new
     Type:  feature       |   Milestone:  Future Release
  request                 |     Version:
 Priority:  normal        |  Resolution:
Component:  Customize     |     Focuses:  ui, accessibility, administration
 Severity:  normal        |
 Keywords:  has-patch     |
--------------------------+------------------------------------------------

Comment (by westonruter):

 I think that there should be default breakpoints defined for Desktop,
 Tablet, and Mobile. The configuration for each breakpoint could include
 the label, icon(?), width/height, and whether entering the breakpoint
 requires a refresh (i.e. it is adaptive not responsive):

 {{{
 array(
         array(
                 'id' => 'desktop',
                 'label' => __( 'Desktop' ),
                 'width' => 1366,
                 'height' => 768,
                 'refresh' => false, /* responsive */
         ),
         array(
                 'id' => 'tablet',
                 'label' => __( 'Tablet' ),
                 'width' => 768,
                 'height' => 1024,
                 'orientation' => 'landscape',
                 'refresh' => false, /* responsive */
         ),
         array(
                 'id' => 'mobile',
                 'label' => __( 'Mobile' ),
                 'width' => 360,
                 'height' => 600,
                 'orientation' => 'portrait',
                 'refresh' => true, /* adaptive */
         )
 )
 }}}

 (Something we haven't talked about yet is previewing different device
 orientations, e.g. landscape instead of portrait.)

 The theme can then filter this list of defaults based on which breakpoints
 it supports.

 I should also note that customizer transactions (#30937) will make it
 possible to pop the preview frame out into a separate window, and make it
 easier to view the pending setting changes using those responsive
 previews, or even on other devices entirely.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31195#comment:21>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform