Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Rendu responsive sur IPHONE


Sujet :

Responsive design en CSS

  1. #1
    Membre à l'essai
    Rendu responsive sur IPHONE
    Bonjour à tous je me permet de vous solliciter malgré des recherches sur le net et de nombreux essai me voilà dans l'impasse. Le responsive marche bien sur les différents mobile quand je passe sur Iphone c'est plus la même histoire.

    voici le site : www.dansmanature.fr

    j'utilise les mediaqueries dans mon CSS.

    Voici le résultat sur iphone:




  2. #2
    Invité
    Invité(e)
    Bonjour,

    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <html>
     
    <head>
     
        <!DOCTYPE html>
        <html lang="fr">
    ...


    Déjà, il y a un problème de structure HTML !

  3. #3
    Membre à l'essai
    Bonjour effectivement la c'est grave !!! merci pour me l'avoir fait remarquer.

    Pour ajouter une chose quand je met l'inspecteur (F12) sur iphone tout est ok mais quand je regarde sur le mobile directement c'est l'horreur.

  4. #4

  5. #5
    Invité
    Invité(e)
    1- Ce n'est toujours pas <!DOCTYPE>, mais <!DOCTYPE html>.

    Et 3 balises encore en trop :
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
            </nav>
     
            </div>
            </div>
        </header>


    2- Concernant les font-size et line-height :
    ce n'est pas une bonne idée d'utiliser l'unité vw.

    Les textes sont trop grands sur grand écran *, et trop petits (illisibles !) sur petit écran !
    font-size:100%; (ou 1em) fonctionne bien sur TOUT écran.

    * la mise en page sur "grand écran" ressemble à un "zoom", où les photos sont ridiculement trop petites par rapport aux textes.
    Dommage...

    3- Enfin (? **), tu as mis tous tes styles CSS perso dans le fichier css/bootstrap.css, qui contient les styles Bootstrap.
    Crée plutôt ton fichier PERSO à part, ce qui te permettra, au moins, d'updater le fichier bootstrap.css si nécessaire.

    ** Il y aurait encore beaucoup à dire...

  6. #6
    Membre à l'essai
    Bonjour , merci pour tes remarques je vais prendre notes c'est la première fois que j'utilise Bootstrap . Habituellement j'utilise un fichier css de base et un autre pour le responsive.


    cordialement.