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!