Problema di adatamento pagina Web a iPhone X

[Maxilboss93]

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

 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:

 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".

[ciro78]

ma perchè fare le media query con js quando i css nativamente le supportano?

[Maxilboss93]

Perchè in alòcuni casi ho bisogno di creare o eliminare elemeni nel DOM dinameicamente tramite jquery e per farlo ho bisogno di riconoscere le dimensioni e il tipo di device!

[cavicchiandrea]

Ma se il progetto e responsive e sviluppato gerarticamente puoi eliminare/aggiungere tutti gli elementi che vuoi a prescindere che device venga usato, oppure in alternativa svilupperei app per smartphone e tablet usando jquery-mobile

[Maxilboss93]

Grazie per queste tantissime non soluzioni ma ho risolto!

[Vincent.Zeno]

Grazie per queste tantissime non soluzioni ma ho risolto!

sarebbe interessante sapere come, così che possa essere d'aiuto a chi dovesse avere un problema simile

[Maxilboss93]

Tutto ciò che non è iPhone o Tablet allora è iPhone X o superiore quindi poi lo tratto così:

else {
            ////////////////////////////////////////////////////////////////////////////iPhone X//////////////////////////////////
            var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;


            // Get the device pixel ratio
            var ratio = window.devicePixelRatio || 1;


            // Define the users device screen dimensions
            var screen = {
                width: window.screen.width * ratio,
                height: window.screen.height * ratio
            };


            if (iOS && screen.width == 1125 && screen.height === 2436) {
                var cssId = 'iPhone'; // you could encode the css path itself to generate id..
                if (!document.getElementById(cssId)) {


                    var link1 = document.createElement('link');
                    var head = document.getElementsByTagName('head')[0];
                    link1.id = cssId;
                    link1.rel = 'stylesheet';
                    link1.type = 'text/css';
                    link1.href = 'assets/js/dynamicLayout/css/iPhone.css';
                    link1.media = 'all';
                    head.appendChild(link1);
                }


                var scale = window.devicePixelRatio;
                var exit = document.createElement("button");
                exit.id = "esc";
                var search = document.createElement("button");
                search.id = "cerca";
                $("#idTblContainer .dataTables_scrollBody").css("max-height", "730px");
            }




        }