Webpage on mobile browser

I’m having some difficulties getting this to look ok.

I have detected smaller client screen sizes and made alternate web pages with smaller minimum screen sizes.

When I click in a text field (like a search field) the screen slightly zooms. When done, it doesn’t restore, making it necessary to pinch to resize the screen.

What are the best practices to make a xojo web page behave well?

ps: followed another post suggesting to add this to the HTML Header:

Please wrap your HTML Header in code tags because the forum is eating the HTML. I have a guess as to what’s there, but I don’t want to make recommendations on a guess.

What width are you using for pages? With experimentation I found I needed to use 240px maximum or I got funky behavior on Pixel.

What device and browser are you using?

What Xojo version?

2 Likes

Hey Tim,

here is the HTML

I have tried a bunch of min widths but hadn’t gone as low as 240.
I just tried that now.

I am now seeing the same behavior on any page where there is any kind of text field – once you tap inside the text field the page zooms just a bit. On some pages it doesn’t matter because there isn’t anything close to the edges but where there is something close to the edge it will bump off.

I’m testing with the web app running on my MacBook Pro and the client is my iPhone 17 pro using Safari.

If you paste HTML code in your message we will never see it (not sure if you can see it).

You need to go on the top bar of your post and wrap your code with ``` or use the </> option while selecting all your HTML.

This is how we see your messages:

I did!

Well, I can’t see it, and reading Tim’s comment:

he can’t either.

I’m pasting some code here:

now, same code within code tags:

<!DOCTYPE html>

Work for me,

A sample project would be great so we could replicate your environment. I won’t be able to test Safari on iPhone but I can help with Android.

I’ve solved it. I’ll post the solution when I get back to my laptop.

The suspense… what was the solution?