Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Overlay keyboard for fullscreen game on mobile is broken (goes on top of the content)

A topic by Vaaal88 created Jun 18, 2024 Views: 286 Replies: 5
Viewing posts 1 to 2
(2 edits) (+1)


Hi! I'm developing a web-based game, which is displayed within an iframe on a simple index.html page. While the game functions well on desktops, I've encountered a problem on mobile devices: when a user taps an input field (like when chatting with someone - my game is a fictional chat), the mobile keyboard covers the game content without resizing the page. This issue seems specific to how the game is embedded on itch.io, as I've identified that adding a specific <meta> tag solves the problem:

<meta name="rendering" content="interactive-widget=resizes-content"> 

This tag allows the page to resize appropriately, improving the mobile experience significantly. Given its benefits, I believe this should be a default setting, as any application with input fields could otherwise be challenging to use on mobile devices.

In the meantime, while waiting for a possible update from itch.io, I've requested CSS access. However, I understand that CSS modifications won't allow me to change the HTML structure, such as adding a <meta> tag. Is that correct? What are my options here? I want to ensure my game is accessible to mobile users without significant delay. Thanks for any guidance you can offer!

Admin

Having access to the CSS editor will not allow you to use the meta tag. Can you confirm that you’ve tried adding this meta tag to your iframe content and that it does not solve the issue?

(1 edit) (+1)

Correct, it's in my iframe and it works when my page is not embedded in itch.io. Meta tags are not inherited through iframes. So yes, even if the meta tag is in my iframe, it doesn't solve the issue. 

You can easily check that adding the meta to the itch.io game page solves the issues. If you don't have any game page with an html game with an appearing keyboard I can privately give you the password to my restricted project. 

(+1)

any news about this? 

how about using virtual keyboard API?

I didn't know about this, I'll take a look, thanks :)