Adjusting behaviour on higher resolution displays or windows zoom

Dear support
I am trying to find a solution for some layout problems on higher resolution screens with enfold theme. I have now add a small java to our page to adjust the behaviour of zoom settings. This works in this way for every page:

function wpb_hook_javascript() {
    ?>
        <script>
   document.querySelector('*').style.zoom = '${1 / window.devicePixelRatio * 100}%';
   
        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

The behaiour is now that the size of the content is changing on several zoom levels. Unfortunatelly the wildcard * does include every element. I try to exclude tab-sections because the content of the active tab inner and the next tab is noe visible. Tried several solutions like that (also enfold selectors from the tab section):

function wpb_hook_javascript() {
    ?>
        <script>
   document.querySelector('*:not(#mobile-lager-app)').style.zoom = '${1 / window.devicePixelRatio * 100}%';

        </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

But I am not able to find a selector that works to exclude. So my question is: You could you help me out finding the right class for the tab section or another selector to replace thw wildcard * to get it work?

You can see an example on a development stage there: Example Page <– the page is resizing regarding to the zoom level of the browser, but also the tab section content.

Thanks a lot of your help Marc

• This topic was modified 3 years ago by L-mobileGroup2022.
• This topic was modified 3 years ago by L-mobileGroup2022.
• This topic was modified 3 years ago by L-mobileGroup2022.
• This topic was modified 3 years ago by L-mobileGroup2022.