Help me check something works across common devices

[TemplateRepo]

I’ve just made something using a mixture of Limelight, OpenStreetMap, UIkit, and some other gubbins.

It’s working for me on all the devices I’ve tried, but before I develop it more (which is going to take a lot of time) I want to check I’ve not missed anything.

Please go here: Casa Elana Torrox Townhouse Guest Area.

Scroll down and click on the “Buses” link. (see screenshot)

Once the Buses section opens click on the button that says “Click Here To See Bus Stop On Map”.

What should happen next is you scroll down the page to @Jannis OpenStreetMap stack, and the popup for the bus stop should be open on the map.

Please check on whatever devices you have to hand.

Ta.

[Webdeersign]

Worked OK on Safari 15.5 (Catalina) but didn’t get the pop up Bus Stop on Firefox.

Took a long time to load though on both.

[TemplateRepo]

What time to load? The page, or the calendar?

I know the calendar takes a while to load, as it pulls from Google, but for me everything else is loading pretty quick. Bearing in mind what is being loaded (loads!).

Oh, and it’s really devices I’m more concerned with, over browsers. Cus as we know, no normal people use Firefox ;-)

[Webdeersign]

https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.torroxholidayrental.com%2Flocal-info%2F&form_factor=mobile

The Rio Torrox valley is a Firefox stronghold from what I hear.

[TemplateRepo]

LOL.

It was, but I’m slowly running them all out of town.

And on the page speed, ya, it’s not fast. But I kinda expected that. It’s got so many moving parts, and and pulls in content from so many different places, it was never going to be too zippy.

Thankfully, it’s my own site, so no client will be shouting at me :-)

[jabostick]

Shows up for me on the one and only Firefox, but it’s almost off the map at the bottom, so I almost missed it

[Jannis]

Good on my iPhone, all I have at the moment.

Reminds me to book my next holiday with you 😛

[TemplateRepo]

Sorry, no kids allowed!

I might make an exception for you though ;-)

Jabo: Ya, I’ve seen that too. Seems the map won’t scroll enough. Any ideas Jannis?

Aldso, Jannis, is it poss to add the external launcher code directly to a UIkit button?

[Jannis]

@TemplateRepo

Seems the map won’t scroll enough.

I don’t have much control how the map scrolls when a marker pops up. I will have a look if I can adjust anything there.

@TemplateRepo

is it poss to add the external launcher code directly to a UIkit button

Currently, everything inside a launcher will be wrapped inside a link. The button contains a links it side it’s content. Yes, I will add a setting so you’re able to place a button inside a launcher.

[Kent]

works fine for me too. In firefox

[GKs]

Tested it with both a standard iPad (landscape orientation) and iPhone SE (both with the Safari, Chrome and Firefox browser - all the same). Functionality works, but on both devices the map scrolls to the top of the screen, such that the magnification buttons of the map overlay the menu bar.

The position of the bus stop on the map on the iPad looks good, on the iPhone SE it seems to be crammed to the bottom.

Here are the screenshots:

[dave]

I checked it in Chrome, Edge and Firefox on my Windows 10 Surface (landscape and portrait) - it looked and worked great in all. And, it was plenty fast for me (I’m in the foothills of north Georgia, USA).

[TemplateRepo]

Thanks folks. Appreciate the feedback.

[Gianluca]

IPhone 13 pro, safari

[TemplateRepo]

Oh crap. The navbar looks all wrong!

Thanks for that.

[TemplateRepo]

How have you got your screen/Safari set up for that view? I’ve just tested on a 12 and 13, and it’s not rendering like that, it renders correctly.

Have you got text zoomed?

[Gianluca]

Now scrolled down more in Safari,
below the screenshot, I view with zoom

[Gianluca]

visualizzazione STANDARD

[Webdeersign]

The issue is the menu items collide on small devices.

Forget the stupid RW8 preview modes. Instead, use Safari’s Responsive Design Mode and and check the iPhone SE or the width at 320px.

[TemplateRepo]

I test on real devices. But I test down to 385. Devices with smaller widths are a tiny amount of users.

Edit. I think it’s down to 370, not too sure, in the gym right now so can’t check.

Edit edit. The 2020 iPhone se has a viewport of 375. So I think I’m safe not designing for a six year old phone!