I'm currently trying to create an app from my WordPress site but when I do, I'm running into the issue of the header, right sidebar, and footer showing. I'd ultimately like to hide these if they appear within a window without a URL option. I'm not even sure that's viable.
What's happening is that the app maker is pulling in pages from my WordPress site and displaying like an app. Except for the header, sidebar, and footer unnecessarily being there. I can't hide these based on screen because I still want people with mobile devices to be able to see if they're looking on a browser window.
You could tell the app maker to call the url with an extra param like ?hide_ui=1 and then in your site use JS to check if that param is present in the url and hide the elements you don't want visible in the app.
CSS does not have the power to do this, it's something that needs to be done either with client-side (JS) or server-side. The latter would probably be a cleaner and easier option.
On the server side, with PHP you can do the following:
$hide_stuff = (isset($_GET['hide']) && trim($_GET['hide']) == '1');
if ($hide_stuff) {
echo '<link rel="stylesheet" type="text/css" href="/path/to/file.css">';
}
So that when the page URL includes ?hide=1 the server will automatically add /path/to/file.css to the page. Then, in file.css you can simply do whatever you want, like hiding elements.