Buongiorno developers,
Ho un bel problema, sto sviluppando una pagina web usando javascript e css e sono arrivato alle media-query per iPhone X (orientation:landscape), il mio problema è che una volta che con jQuery ho identificato che si tratta di un iPhone X utilizzando:
nella pagina php il meta

codice:
 if (window.innerWidth<767){
                document.querySelector("meta[name='viewport']").setAttribute("content","initial-scale=0.7, minimum-scale=0.7, maximum-scale=1.0, user-scalable=no, minimal-ui");
            }else{
                document.querySelector("meta[name='viewport']").setAttribute("content","initial-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui,viewport-fit=cover");
            }
Per capire che è un iPhone X in landscape:

codice:
 if ((browserWidth >= 700) && (browserWidth <= 1280)) {  
                 var screenWidth = $(window).width() * window.devicePixelRatio;
                 var screenHeight = $(window).height() * window.devicePixelRatio;


                if (screenWidth >= 1125 && screenHeight <= 2436) {
                    var content = document.getElementsByClassName("tab-content");
                    $(content).css("padding-left", "env(safe-area-inset-left)");
                    $(content).css(" padding-right", "env(safe-area-inset-right");
                }



}
vorrei adattare la mia pagina al dispositivo poichè al momento usando il Dev-tool di Chrome me la visualizza troppo "zoommata" o ingrandita se metto in landscape,
all' interno del sito ho una jQuery-datatable e siccome la pagina è troppo ingrandita in landscape mi visualizza solo 2 o 3 righe al massimo, vorrei sapere se c è un modo per visualizzare la mia pagina più "allontanata" o "meno-zoommata".