Difference entre inspecteur chrome et l'affichage réel du device

bonjour
Je suis en formation dwj open-classrooms
Projet 1 responsive:

j'ai fait la partie responsive pour un ipad (paysage:1024px et portrait:768px)... Sur l'emulateur de chrome, tout parait ok...

Seulement, sur mon ipad, a priori la fenetre safari ne doit pas répondre à ses dimensions: je n'ai pas la largeur voulue, mon nav est compressé, et l'afichage de ma section "contact n'est pas conforme...

Et je ne trouve pas de renseignement fiable pour déterminer les dimensions exacts de la fenetre...

La photo 1 c'est le rendu de l'inspecteur chrome en width:1024px; (ipad2: paysage)

https://www.dropbox.com/s/jboyb5hq6sxmmv9/Capture%20d%27%C3%A9cran%202018-04-25%2012.05.28%282%29.png?dl=0

La photo 2: c'est le rendu réel sur l'ipad
https://www.dropbox.com/s/pats24388wcnjuz/IMG_0001.png?dl=0
D'ailleurs la largeur de la capture est de 2048?...
le rendu est toujours différent dans chrome avec cette résolution... Comprends pas

pour info, j'ai bien mis la balise viewport dans mon head...

Le code:
https://codepen.io/kojejefroots/pen/yjJbBv

Et le site en construction

www.kojeje.fr/wba

Quelqu'un a une idée?

Merci d'avance!

Bonne journée!