In Sitecore preview mode we can preview our page before pushing it to production. Sitecore provide many type of simulator to simulate the page and to make sure how it will look into the real device.
Main simulator which are present in Sitecore are –
- Android phone
- Android Tablet
- Android Phablet
- Feature Phone
- HD TV
- Windows Phone
But what about if your client request you to see web page in any other simulator? Well, we can create our own simulator in Sitecore by following some easy steps.
I am taking an example for 4K HD TV which have resolution of 3840×2160 in my case.
- Create new simulator item – creating simulator is as easy as creating Sitecore item.
- Login into Sitecore content editor
- Create simulator item under -/sitecore/layout/Simulators, by right clicking and selecting simulator template(/sitecore/templates/System/Layout/Preview Simulators/Simulator) form the insert option
- You can provide simulator and icon to the newly create item, for my example I gave name “4K HD TV” and provided an icon.
2. Fill the fields in simulator item – next step is to fill the field in the new simulator item but lets discuss about the field which are in use.
User agent – This field is under Data section and used to provide browser user agent string. With the help of user agent you can specify which browser you want to use in simulator. You can download user agent string from following url – http://www.useragentstring.com/pages/useragentstring.php
In my example I am using user agent string of “Chrome 41.0.2228.0”
“Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36”
Background Image – background image is basically your simulator device image, where you have to careful about the resolution of screen. It should be accurate, here I needed to do some Photoshop because I was not lucky to find on google.
Screen Width – width of simulator device screen
Screen Height – Height of simulator device screen
Screen Offset – (Left, Top) – it’s used to provide the Left and top position of the simulator device screen. For example screen of simulator device start from 100px left and 80px top the 100, 80 is the screen offset of the simulator.
Scale – Scale value of simulator or in other word zoom level of simulator. It is a droplist field where Sitecore provide three scale level 50, 75, 100 but you can create your own scale level by creating node item under /sitecore/system/Settings/Simulators/Scale Values, item name will be the value of scale level
After filling all above field we are done.
There are some other options are also available such as “No flash support”, “No Silverlight support”, “simulator rotate state” etc. you just need to create sub item under the simulator item for providing these options. For simulator rotate state you can specify the same fields which we have filled for our simulator.
You just need to test your simulator by previewing your page.
Thanks and cheers