Bonjour, je viens de créer la version mobile de mon site. Mon site est hébergé sur mon propre serveur dans mon réseau local. Lorsque je me connecte en WI-Fi à mon réseau local(le même réseau que mon serveur web) la page version mobile s'affiche parfaitement.

Maintenant j'essaye d'y accéder via internet avec la 3G de mon téléphone et là surpise, le site est carrément déformé :(

Quelqu'un a t'il déjà rencontré ce problème ou a une idée?

Merci d'avance :)

7 réponses


As-tu ouvert les ports de ta box ? Comment le site est-il déformé (un screenshot serait le bienvenu)

Pour ce qui est de la box, oui j'ai ouvert les ports et je peux accéder au site depuis internet sans problème.

Voici une capture d'écran du site lorque je m'y connecte depuis le même réseau en WIFI:
[http://quentin-fr.ddns.net/capt_wiko2.png]()

Voici une capture d'écran du site en 3G depuis internet:
[http://quentin-fr.ddns.net/capt_wiko1.png]()

Tu utilises une librairie CSS ? Bootstrap ?

J'utilise effectivement une feuille de style:

a{
    color:#3E959B;
    text-decoration: none;

}

a:hover{
    color:#2EE2EF;
    text-decoration: underline;

}

p{
    font-face:arial;

}

.avatar {
        border-radius:50%;
        width: 40px;
        height: 40px;

}

#liste_utilisateur{
    position: absolute;
    top:160;
    left: 1%;
    width:25%;
    height:72%;

}

#partage{
    position: absolute;
    top: 160;
    left: 26%;
    width: 73%;
    height: 72%;

}

.entete_msg{
    font-size: 16;

}

.entete_rep{
    font-size: 14;

}

.body_msg{
    font-size: 16;

}

.avatar_rep{
    border-radius:50%;
    width:30px; 
    height:30px;

}

.avatar_rep2{
    border-radius:50%;
    width:35px; 
    height:35px;

}

.poubelle_msg{
    width: 50px;

}

@media screen and (max-device-width: 500px){

    .avatar {
        border-radius:50%;
        width: 100px;
        height: 100px;

    }

    #liste_utilisateur{
        display: none;
        width:0%;

    }

    #partage{
        position: absolute;
        left: 0;
        width: 100%;
        height: 72%;

    }

    .entete_msg{
        font-size: 40;

    }
    .entete_rep{
        font-size: 35px;
        font-style: arial;

    }

    .body_msg{
        font-size: 31px;

    }

    .avatar_rep{
        border-radius:50%;
        width:80px; 
        height:80px;

    }

    .avatar_rep2{
        border-radius:50%;
        width:85px; 
        height:85px;

    }
    .poubelle_msg{
        width: 100px;

    }
    .input_rep{
        width: 80%;
        height: 75;
        font-size: 40;

    }

}

Pas de Bootstrap, Semantic UI ? Tout est fait à la main ?

Je ne sais pas trop ce que c'est:/ Et oui c'est fait à la main.

En fait, ton site doit s'adapter à la largeur de ton mobile. Soit en utilisant les media queries, soit en utilisant une librairie CSS du genre de Bootstrap. Ca s'appelle le responsive ;)