Skip to main content
1-Visitor
September 27, 2018
Solved

responsive design of experience

  • September 27, 2018
  • 1 reply
  • 6845 views

Hi, I am a newbie in Thingworx Studio. I have my first experience running on a tablet. That works fine. But on a Smartphone, it is not working. Obviously because I didn't pay attention to a "responsive design". Unfortunately I cant find much information and maybe tutorials related to this. Can someone share valuable links, documents, with which i can teach myself how to do it?

 

I dont know how the pixel size, determined in the Canvas interfere with the design. If i want to develop it both for a tablet and smartphone, what do I start with? Which pixel size? 

 

So please feel free to share any content, that can help me. Thank you in advance!

Best answer by jmikesell

So in Preview you can switch devices to simulate what your experience will look like on various sized devices (also landscape vs. portrait, which is critical). As for making it responsive you can use all allowable CSS units including relative lengths like vw, vh, em, %. Use of these will help you scale your 2D objects to the viewport.

 

 

1 reply

1-Visitor
September 27, 2018

Hi,

 

Perhaps it is just a simple matter of changing the Minimum Screen Width setting in the Info Editor in Studio? If set to tablet, you may have an issue viewing on a smart phone. Just change this and re-publish to see if this is the issue?

 

Regards,

 

Brian

1-Visitor
September 27, 2018

Hi Brian,

 

no unfortunately its not. This setting is already at 320 dp. 

What I will try now is to set, as seen in the picture the size to 100% and adapt all inputs, tables and so on accordingly. Maybe this will work.

 

Thanks for your help anyway!

jmikesell1-VisitorAnswer
1-Visitor
September 27, 2018

So in Preview you can switch devices to simulate what your experience will look like on various sized devices (also landscape vs. portrait, which is critical). As for making it responsive you can use all allowable CSS units including relative lengths like vw, vh, em, %. Use of these will help you scale your 2D objects to the viewport.