Ton site sur le nouvel iPhone pliable · Vérifier en 30 secondes et réparer · Guide complet

📱 L'iPhone Duo sort le 23 octobre 2026. Fermé, c'est un iPhone normal. Ouvert, c'est un écran de 7,6 pouces presque carré. Ton site n'a jamais été testé sur ce format, personne ne l'a été. Ce guide te donne : comment vérifier ton site en 30 secondes, les 8 choses qui cassent, et un outil pour Claude qui répare.

⚡ Étape 1 : vérifier ton site (30 secondes, rien à installer)

Ouvre duoresponsive.com, colle l'adresse de ton site, et regarde-le en mode ouvert.

Deuxième outil, plus visuel : duo-view.netlify.app, un modèle 3D du téléphone qui se plie, avec ton site dedans. Tu vois la transition, pas juste deux captures.

🔒 Les deux tournent dans ton navigateur. Ton adresse n'est envoyée à aucun serveur. Tu peux même tester un site en local (localhost).

Ce que tu regardes

• Une bande blanche sur le côté : ton site est bloqué en largeur fixe
• Le menu burger encore là sur un écran de 7 pouces : tes règles d'affichage s'arrêtent trop tôt
• Il faut scroller sur le côté : quelque chose déborde
• Le bouton principal (acheter, réserver, contacter) hors de l'écran ou coupé : c'est celui-là qui coûte de l'argent
• Du texte énorme ou minuscule par rapport au reste

📐 Pourquoi ça casse (les 3 vraies raisons)

1. Le format tombe dans un trou

La plupart des sites ont deux réglages : « petit écran » en dessous de 480, « grand écran » au-dessus de 768. 466, 626 et 890 tombent entre les deux. Le site ne sait pas quoi faire et sert la version mobile, étirée.

Autre chose : ouvert, la forme de l'écran est presque carrée (rapport 1,42 contre 2,17 sur un iPhone classique). Toutes les mises en page « colonne qui défile » ont été pensées pour un écran allongé.

2. La personne ouvre le téléphone en pleine page

C'est le cas que personne n'a prévu. L'écran change pendant la visite. Si ton site a mesuré la taille de l'écran une seule fois, au chargement, il ne la remesure jamais : menu figé, carrousel coupé, animation bloquée, barre collante au mauvais endroit.

3. Safari ne voit pas le pli

Sur les pliables Android, les navigateurs savent où se trouve la pliure et les sites peuvent s'y adapter. Safari, non : Apple n'a pas implémenté les standards qui le permettent. Il n'y a donc aucune solution maligne à aller chercher : soit ton site est fluide entre 440 et 900 de large, soit il ne l'est pas.

⚠️ Et l'iPhone Duo se présente comme un iPhone normal. Si ton site (ou ton thème) détecte « iPhone » pour servir une version mobile, il servira la version 390 px sur un écran de 890 px. C'est le piège numéro un.

🧩 Étape 2 : le skill duo-ready pour Claude

Un dossier à donner à Claude : il lit ton site, trouve les 8 problèmes, et te sort les corrections fichier par fichier.

🛠️ Ce qu'il te faut : l'accès au code de ton site (un dossier sur ton ordi, ou un dépôt). Si ton site est sur WordPress, Wix ou Shopify sans accès au thème, saute à la section « Sans accès au code » plus bas : il y a 3 lignes à coller qui évitent le pire.

Installation, version app Claude (sans terminal)

1. Récupère le dossier duo-ready (voir plus bas) et zippe-le
2. Dans l'app Claude : Réglages → Capabilities → active « Code execution and file creation »
3. Réglages → Customize → Skills → + → Upload a skill, choisis le ZIP
4. Dans une conversation, dis simplement : Audite mon site pour l'iPhone Duo et dépose ton dossier

Installation, version Claude Code

Dézippe le dossier duo-ready dans ~/.claude/skills/, puis dans ton projet :

claude
> Audite ce projet pour l'iPhone Duo avec le skill duo-ready

Ce qu'il fait

bash scripts/audit.sh .

Il sort un rapport groupé par gravité : ce qui casse, ce qui dégrade, et tes réglages d'affichage actuels. Puis Claude te propose les corrections, une par une.

Et si tu as Node installé :

node scripts/shots.mjs https://ton-site.fr

Il prend 4 captures : les trois tailles d'écran, plus une quatrième qui simule quelqu'un qui ouvre le téléphone en pleine page. C'est celle-là qui révèle les vrais bugs.

🔍 Les 8 choses qui cassent (la liste à donner à ton dev)

🩹 Sans accès au code (WordPress, Wix, Shopify, Squarespace)

Cherche « CSS personnalisé » ou « Code personnalisé » dans les réglages de ton thème, et colle ça :

html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; height: auto; }
.hero, .section-full { min-height: 100dvh; }

⚠️ Ça évite le pire (défilement horizontal, images qui débordent, section plein écran figée). Ça ne répare pas tout. Les problèmes 4, 5 et 6 de la liste demandent l'accès au thème. Si ton site est une vitrine simple, les 3 lignes suffisent souvent. Si tu vends dessus, fais regarder.

📂 Les fichiers du skill

La structure du dossier à créer :

duo-ready/
  SKILL.md
  scripts/
    audit.sh
    shots.mjs
  reference/
    fixes.md

SKILL.md est le cerveau : les trois tailles d'écran, les 8 anti-patterns avec leur correction, l'ordre dans lequel Claude doit travailler. reference/fixes.md contient les corrections prêtes à coller pour chacun des 8 problèmes, en CSS et en JS/React.

💡 Le plus simple : colle le script ci-dessous et le tableau des 8 problèmes dans une conversation Claude et demande-lui « recrée le dossier duo-ready complet ». Il reconstruit SKILL.md et fixes.md tout seul à partir de là.

scripts/audit.sh

#!/usr/bin/env bash
# duo-ready — audit statique heuristique pour l'iPhone Duo
# Usage : bash scripts/audit.sh [dossier]
set -u
ROOT="${1:-.}"

EXCL='--exclude-dir=node_modules --exclude-dir=.git --exclude-dir=dist --exclude-dir=build --exclude-dir=.next --exclude-dir=.output --exclude-dir=.vercel --exclude-dir=coverage --exclude-dir=vendor'
INC='--include=*.html --include=*.htm --include=*.css --include=*.scss --include=*.sass --include=*.less --include=*.js --include=*.jsx --include=*.ts --include=*.tsx --include=*.vue --include=*.svelte --include=*.astro --include=*.php --include=*.twig --include=*.liquid'

HIGH=0; MED=0

section () { printf '\n\033[1m%s\033[0m\n' "$1"; }
run () {
  local sev="$1" label="$2" re="$3" tip="$4"
  local out
  out=$(grep -rnE $EXCL $INC -- "$re" "$ROOT" 2>/dev/null | head -n 40)
  if [ -n "$out" ]; then
    local n; n=$(printf '%s\n' "$out" | wc -l | tr -d ' ')
    printf '\n[%s] %s — %s hit(s)\n' "$sev" "$label" "$n"
    printf '%s\n' "$out" | sed 's/^/   /'
    printf '   → %s\n' "$tip"
    if [ "$sev" = "HAUTE" ]; then HIGH=$((HIGH+n)); else MED=$((MED+n)); fi
  fi
}

section "duo-ready — audit de : $ROOT"
echo "Viewports cibles : 466x678 (ferme) - 626x890 (ouvert) - 890x626 (ouvert paysage)"

section "Severite HAUTE (ca casse)"
run HAUTE "#1 100vh / 100vw" '[^d]100vh|[^d]100vw|height:\s*100vh|min-height:\s*100vh' \
  "Remplacer par 100dvh (garder 100vh en fallback sur la ligne d'avant)."
run HAUTE "#4 largeur d'ecran lue une fois" \
  '(const|let|var)\s+\w+\s*=\s*(window\.)?(innerWidth|outerWidth|screen\.width|matchMedia\([^)]*\)\.matches)' \
  "Passer par ResizeObserver ou matchMedia(...).addEventListener('change')."
run HAUTE "#5 sniffing user-agent" \
  'navigator\.userAgent|/iPhone|iPad|Android/|MobileDetect|mobile-detect|react-device-detect' \
  "Duo se declare iPhone. Remplacer par des media queries / container queries."

VP=$(grep -rnE $EXCL $INC -- '<meta[^>]*name=["'"'"']viewport["'"'"'][^>]*>' "$ROOT" 2>/dev/null | grep -v 'viewport-fit' | head -n 20)
if [ -n "$VP" ]; then
  printf '\n[HAUTE] #2 meta viewport sans viewport-fit=cover\n'; printf '%s\n' "$VP" | sed 's/^/      /'
  HIGH=$((HIGH+1))
fi

section "Severite MOYENNE (ca degrade)"
run MOYENNE "#3 safe-area top/bottom sans left/right" 'safe-area-inset-(top|bottom)' \
  "Declarer aussi safe-area-inset-left / -right."
run MOYENNE "#7 largeurs fixes de conteneur (375-430 px)" \
  '(width|max-width|min-width)\s*:\s*(37[0-9]|38[0-9]|39[0-9]|4[0-2][0-9]|430)px' \
  "max-width: 100% ou min(430px, 100%)."
run MOYENNE "#8 hauteur calculee en JS au chargement" \
  '(offsetHeight|clientHeight|getBoundingClientRect\(\)\.height)\s*[;)]' \
  "Si utilisee pour un sticky/fixed, recalculer sur resize ou passer en CSS."

section "#6 Breakpoints trouves"
BP=$(grep -rhoE $EXCL $INC -- '@media[^{]*\((min|max)-width\s*:\s*[0-9.]+(px|em|rem)\)' "$ROOT" 2>/dev/null | grep -oE '[0-9.]+(px|em|rem)' | sort | uniq -c | sort -rn | head -n 15)
if [ -n "$BP" ]; then
  printf '%s\n' "$BP" | sed 's/^/   /'
  echo "   -> Y a-t-il quelque chose entre ~440 et ~900 px ?"
else
  echo "   Aucune media query trouvee (Tailwind ? sm=640 md=768 -> 626 et 890 tombent entre deux)."
fi

section "Resume"
echo "   Hits severite haute   : $HIGH"
echo "   Hits severite moyenne : $MED"
echo "   Ce script grep, il ne comprend pas le code : chaque hit est a verifier."

🧯 Dépannage

📅 Le calendrier

• 9 septembre 2026 : annonce
• 16 octobre : ouverture des précommandes
• 23 octobre : en vente, à partir de 1 999 $

Tu as donc environ un mois. Les premiers acheteurs d'un téléphone à 2 000 $, ce sont rarement des gens sans budget.

🔗 Sources

• Annonce officielle : apple.com/newsroom, Apple unveils iPhone Duo
• Tailles d'écran (calculées, non officielles) : webmobilefirst, plié · déplié
• Safari et le pli : iphoneduosupport.com
• Zone 440 à 768 et checklist : bluetext.com
• Côté applications : Designing for iPhone Duo, Apple Developer

📏 Les tailles d'écran en pixels ne viennent pas d'Apple : elles sont calculées à partir de la résolution annoncée. Elles sont fiables pour travailler, mais si tu as l'appareil en main, vérifie en vrai.