Customizer Device Preview: Use px units for tablet preview size

[celloexpressions]

There is a lot of inconsistency with how different devices interpret in units. They were originally used to provide ambiguity in the size of the preview to avoid themes designing specifically to the customizer breakpoints, but browsers and devices can also change they way these units are represented and that can be a jarring experience for users. Additionally, the tablet preview can become too similar to the mobile preview in the information it provides with respect to previewing a variety of device sizes.

See ​https://wordpress.slack.com/archives/core/p1460233108004296. Note: this issue is difficult to explain with screenshots due to the variation across devices, but a few are posted on slack at the above link.

[celloexpressions]

Additional note that the 720px size loosely aligns with the size at which the preview toggle buttons are no longer available, so that users wouldn't be able to switch to tablet mode once there's no difference between that and the preview as they see it (with the customizer controls expanded).

[kirasong]

Personal opinion is that it seems too late for this in 4.5, but interested in hearing if others think it's important to make this change now.

[chriscct7]

I think this would be better to fix in the first 4.5 minor release.

It's a borderline between an enhancement "make sizes more consistent" and a bug "sizes can be wildly different". While it's a contained fix, I think it makes more sense to not worry about it.

[jeremyfelt]

As small as this change seems, I think we need a set of screenshots showing the difference it makes on various devices. We've had this implemented as is in RC for quite a bit now and should leave it.

I don't think it's too much to change in a minor release after testing.

[celloexpressions]

Let's pick this up for 4.5.1. This is very difficult to document with screenshots since it depends on the device you're using, but the new px size proposed in the patch can be screenshoted to demonstrate how it would look with the change (now consistently the same for everyone).

[swissspidy]

Here's two screenshots of the tablet preview in Google Chrome.

Without the patch:

With the patch:

[swissspidy]

See comment:85:ticket:31195 for the original reason behind using inches.

[swissspidy]

Here's a screenshot of the current size in FIrefox:

...and with the patch applied:

Note that zoomed out a bit so the iframe better fits on the screen (just as in the Chrome screenshots before).

The current behaviour definitely needs to be fixed as it indeed looks too much like the mobile preview. Notice how the menu changes in the Twenty Twelve theme used in the screenshot.

[jorbin]

In 37247:

Use px instead of in in device preview

Devices are not consistent in how they handle in units. in was an attempt to cleverly disguise the exact size of the 'tablet'. The PHP code standards mentions avoiding clever code ( ​https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/#clever-code ) but we should extend that idea to the css code as well.

Props celloexpressions
Fixes #36457

[jorbin]

In 37248:

Use px instead of in in device preview

Merges [37247] to the 4.5 branch

Props celloexpressions
Fixes #36457