mobile phones - reponsive design

[wiso]

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]

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

[k.ary.n]

Nice find. Thanks for sharing!!

Both Firefox and Safari have nice Responsive Design modes that are helpful in testing different devices/screens.

[dv3d]

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.

[wiso]

another free tool for checking responsibility:

https://responsively.app/

regards,
wiso

[Hopki]

For all you Mac users Safari has a Responsive Design Mode as found under the Develop menu.

Screenshot 2021-03-23 at 11.04.24.png (530.94 KiB) Viewed 2150 times

Also allows you to rotate for landscape.

Screenshot 2021-03-23 at 11.04.36.png (417.42 KiB) Viewed 2150 times

You can also update Pano2VRs Skin Editor Preview window sizes in Settings/Preferences.
https://ggnome.com/doc/prefs-settings/#skin-editor
The preview window also allows you to activate the Is Mobile state.
To access the different sizes and states simple click and hold the Preview Button.

Screenshot 2021-03-23 at 11.12.38.png (37.91 KiB) Viewed 2150 times

Worth knowing if you did not.
Regards,