mobile phones - reponsive design

Q&A about the latest versions
Post Reply
wiso
Posts: 202
Joined: Wed Oct 26, 2016 6:52 pm

Sat Feb 06, 2021 6:54 pm

hello,
i always have troubles with responsive layout and specially with the pixel sizes of the mobile devices.

what is the best way to get structure in this?

if i take the px data from the skin live preview it should be:

if px is equal 468 it is an iphone landscape => layout version A

if px is equal/smaler 352 it is an iphone portrait => layout version B

and is this also the data for the other mobile phones , samsung and so on.
is there a general px width for mobile phones landscape/portrait?

it is realy hard for me to get a practicable system for adapting my pc/mac work to the different mobile devices (tablets are not so big problems in most cases )
not the scaling , shifting and so on in the logic block, but the right px sizes to design the logic block.

it would be great to have a chart where the different possibilitys and divergencies where shown...

has anybody hints for me,

thx,
best regards,
wiso
wiso
Posts: 202
Joined: Wed Oct 26, 2016 6:52 pm

Tue Feb 09, 2021 3:43 pm

found a website which makes my life a bit easyer:

https://xrespond.com/

it is for testing responsive design and you can put in the webadress of the integrated webserver from pano2vr.

then you can see/test different mobilephones .. in landscape/portrait....


i am still not familiar with responsive design - i am not shure if we ever become friends...

regards,
wiso
User avatar
k.ary.n
Gnome
Posts: 451
Joined: Wed Aug 15, 2007 1:02 pm

Tue Feb 09, 2021 4:34 pm

Nice find. Thanks for sharing!!

Both Firefox and Safari have nice Responsive Design modes that are helpful in testing different devices/screens.
dv3d
Posts: 8
Joined: Mon Feb 06, 2017 2:00 pm

Thu Feb 25, 2021 3:30 pm

I saw a video that Hopki did that had a good trick. After you you hit the output and it displays the tour, just grab the right side of the screen and pull it to the left. The responsive elements will kick in and display like a mobile device. Also once you come up with a logic block responsive size that works just copy it and you can paste it to other elements in the skin. Has worked great for me.
Post Reply