14

While testing out Device Preview (formerly Tridion Device Emulator), I found out that most if not all of the default device sizes are incorrect. Some are off by 40% or more. For example in Device Preview, the iPhone 5 has a default viewport width of 187px, however, in reality the iPhone 5 has a view port width of 320px. The sizes posed in the docs contain the same incorrect values as well:

http://docs.sdl.com/LiveContent/content/en-US/SDL%20Tridion%20full%20documentation-v1/GUID-8AC922A2-17AE-4907-8319-A7CF2B9543D4

It follows that the default device images provided with Device Preview are an incorrect size as well. Is there a specific reason why the defaults do not line up with the real world values? Is there a common place to get accurate device images, to update Device Preview with?

Edit:

while it is true that you can update the device sizes to your desired values, the included images do not automatically scale, which means that in order to get Device Preview working correctly you need to find images of the correct size, or scale the included ones (not ideal).

Improve this question
4
  • I'm not sure why this would be the case but you can adjust the size to anything you want.
    – Piti Itharat
    Commented Dec 23, 2015 at 21:06
  • Please check with sdl support for this issue. it may be product issue.
    – Sudhakar Rao
    Commented Feb 22, 2017 at 18:01
  • @Nicholas Did you solve your issue? If so, consider adding an answer to help others.
    – Rob Stevenson-Leggett
    Commented Apr 24, 2017 at 13:04
  • The only solution to the problem that we found was to re-scale the included images and update the configuration to the appropriate sizes. This does make Device Preview function correctly but unfortunately it does not answer the questions I asked above.
    – Nicholas Wetmore
    Commented Apr 24, 2017 at 14:10

1 Answer 1

Reset to default
1

The name of the tool is called Device Preview (I always hated the name device emulator, because that really was incorrect, an not how I designed it), it is trying to give you a preview of how your page could look on a (mobile) device.

Because this preview is delivered in the actual browser interfcae of whatever (most likely a desktp browser) device you are viewing it on, it can never really emulate the actual device (it sends a different user agent and uses a smaller viewpoeet via an iframe). For the iPhone 5, getting a more proper viewport width and height might still be possible, but for tablets and more modern devices, the desktop screen simply isn't big enough (nor can it deal with retina screens etc). The whole idea of the device preview was that editors could get a quick view on how their content might look, it never was meant to represent actuals, certainly not for layout.

It was made customizable in case you wanted to get a more accurate screen size, for that you will then indeed need to start with finding device images large enough to use, and next you will have to configure the screen sizes for them accordingly. Try searching Google for large enough device images, or draw them yourself (the actual device image doesn't really matter, as long as it has the correct width and height ratio). But always keep in mind you will never be able to emulate a real device, there are specialized tools for that, which will have to emulate the actual device screen, that is not something you can do in a (desktop) browser.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.