Problème affichage différent sur MAC/PC

DrustWeb
Les bases HTML/CSS

Bonjour,

Je viens vers vous pour solliciter votre aide.
Voilà, j'ai réaliser un site internet et celui-ci rencontre des problèmes d'affichages sur MAC (macbook plus précisément). Alors que sur PC, netbook etc... (sauf mobile) le site s'affiche correctement.
J'ai réalisé plusieurs test, sur MAC Pro (l'affichage est bon), MacBook Pro (l'affichage est défectueux).

Voilà un screen de l'affichage sur MacBook Pro :

et voici l'affichage qui fonctionne sur PC :

Voilà, j'espère avoir bien expliqué le problème.

Merci, de votre considération à mon problème :)

6 réponses

Govan06
Réponse acceptée

Elimine le probleme de la font d'abord en important une font google par exemple
genre ça
html head

<link href='http://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css'>

puis remplacer tous les font family
css 

font-family: 'Didact Gothic', sans-serif;
July171292

Salut,
Le problème vient peut être de la taille de tes écran et des propriété css que tu a utiliser.
Sur MacBook pro ton titre "rotter dawn" ne s'affiche pas du tout ?
Montre nous ton code ou l'url de ton site si il est héberger :p

DrustWeb
Auteur

Le titre s'affiche bien oui. Je ne pense pas que ce soit la taille de l'écran (enfin je pense), j'ai testé sur des netbook PC et l'affichage est bon.

Voici une partie du code css :

/ **************************************** /
/ ***************ROTTERS DAMN************* /
/ **************************************** /
body {
    margin: 0;
    padding: 0;
    /*background-color: #070101 !important;*/
    background: url(../img/Mamiya-pellicule-31-6.jpg);
    /*background: url(../img/bkg_site.png) 50% 150px no-repeat fixed;*/
    font-family: "Century Gothic", sans-serif
    }
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0
    }
a {
    text-decoration: none;
    /*color: #720606;*/
    color: inherit
    }
p {
    color: inherit
    }
.warp {
    width: 990px!important;
    margin: 0 auto
    }
#warpper {
    width: 990px!important;
    margin: 0 auto;
    }
/*======================================================*\
                        HEADER
\*======================================================*/
.titre {
    color: #fff;
    text-align: center;
    font-family: "Century Gothic", sans-serif;
    font-size: 48px;
    margin-top: 20px
    }
.titre h1 {
    margin: 0;
    padding: 0;
    color: #fff
    }
nav.menu {
    /*background-color: #080a0d;*/
    background-color: rgba(8, 13, 17, 0.77);
    /*background-color: rgba(234,234,234, 0.7);*/
    height: 40px;
    width: 100%;
    margin-top: 25px
    }
nav.menu ul {
    width: 579px;
    height: 100%;
    margin: 0 auto;
    padding: 0
    }
nav.menu ul li {
    margin: 0;
    padding: 0;
    float: left!important;
    list-style: none;
    display: block;
    height: 40px;
    }
nav.menu ul li a {
    display: block;
    height: 40px;
    float: left!important;
    line-height: 40px;
    text-decoration: none;
    color: #fff;
    padding: 0 15px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s
    }
nav.menu ul li a:hover {
    background-color: rgba(14, 19, 24, 0.95);
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    color: #dfdfdf
    }
.menu_active {
    background-color: rgba(14, 19, 24, 0.95);
    color: #dfdfdf !important
    }
/*======================================================*\
                        FOOTER
\*======================================================*/
footer.foot {
    background-color: #050505;
    height: 275px;
    width: 100%;
    position: relative;
    padding-top: 54px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
footer.foot .social {
    margin: 0 auto;
    height: 50px;
    width: 17%;
    display: block;
    }
footer.foot .social ul {
    margin: 0;
    padding: 0
    }
footer.foot .social ul li {
    float: left;
    list-style: none;
    margin: 0 15px
    }
.bar_footer {
    height: 1px;
    width: 100%;
    background-color: #191919;
    margin: 20px 0
    }
nav.menu_foot {
    width: 49.5%;
    margin: 0 auto
    }
nav.menu_foot ul {
    margin: 0;
    padding: 0
    }
nav.menu_foot ul li {
    list-style: none;
    float: left;
    margin: 0 3px
    }
nav.menu_foot ul li a {
    color: #fff;
    float: left!important;
    }
li.slash {
    color: #720606
    }
.copy {
    text-align: center;
    font-size: 11px;
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 990px
    }
.copy a {
    color: #eaeaea
    }
.menu_active_foot {
    /*color: #a7a7a7!important;*/
    text-decoration: underline
    }
/*======================================================*\
                        INDEX
\*======================================================*/
section.section {
    height: 100%;
    width: 100%;
    /*background-color: rgba(47,59,73, 0.50);*/
    color: #fff
    }
section.section a {
    text-decoration: underline
    }
.first_new {
    height: 530px;
    width: 100%;
    /*background: url(../img/bkg.jpg) 0% no-repeat fixed;*/
    /*background-color: rgba(8, 13, 17, 0.77);*/
    /*background-color: rgba(27,34,39, 0.5);*/
    margin: 0 0;
    padding: 20px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #fff
    }
.first_new .cd {
    margin-top: 5%;
    position: relative;
    float: left!important;
    }
.first_new .cd img:first-child {
    z-index: 2;
    position: relative;
    /*-moz-box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.77) !important;
    -webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.77) !important;
    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.77) !important*/
    }
/*.first_new .cd img:last-child {
    position: absolute;
    left: 120px;
    top: -3px;
    z-index: -1;
    transform: rotate(35deg);
    }*/
.first_new .annoncement {
    float: right!important;
    width: 455px;
    height: 100%;
    margin-right: 0;
    margin-top: 8%;
    margin-bottom: 5%;
    font-size: 1.5em!important;
    display: block;
    }
.first_new .annoncement h1 {
    margin: 0;
    padding: 0;
    }
.font-light {
    font-weight: normal
    }
.first_new .annoncement_boutton {
    /*float: right;
    margin-right: 33%;
    margin-top: -100px
    position: relative;
    margin-top: -134px;
    margin-left: 515px;*/
    margin-top: 50px;
    margin-left: -20px;
    }
.btn-annonce {
    height: 25px;
    background-color: #223442;
    padding: 20px 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    margin: 0 20px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border-bottom: 5px solid #19262f;
    color: #fff
    }
section.second_new {
    height: 100%;
    width: 100%;
    /*background-color: rgba(8, 13, 17, 0.77);*/
    /*background-color: rgba(255, 255, 255, 0.35);*/
    background-color: rgba(27, 34, 39, 0.5);
    /*background-color: rgba(234,234,234, 0.7);*/
    /*background-color: #eaeaea;*/
    margin: 0 0;
    padding: 20px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #fff
    }
h1.subtitle {
    width: 350px;
    font-weight: normal;
    padding: 5px;
    border-bottom: 1px solid #c1c1c1
    }
.new_post {
    margin: 25px 0;
    padding: 0
    }
.new_post a {
    text-decoration: underline
    }
.new_post h3.date_post {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: normal
    }
.new_post h2.title_post {
    text-align: center
    }
.new_post p.content_post {
    text-align: justify;
    padding: 15px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
.new_post .more {
    text-align: center;
    width: 50%;
    margin: 0 auto;
    border-top: 1px solid #e2e2e2;
    display: block;
    margin-top: 40px;
    padding: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box
    }
.new_post .more a {
    color: #fff;
    display: block;
    height: 100%;
    width: 100%
    }
.social_box {
    height: 100%;
    width: 100%;
    float: left;
    display: block;
    text-align: center;
    margin: 25px 0 auto;
    margin-bottom: 25px;
    padding: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
    }
.front_bgc {
    /*background: url(../img/bkg.jpg) 0 150px no-repeat fixed*/
    }
/*.social_box iframe {
    margin: 20px 0;
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.77);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.77);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.77)
    }*/
.subTitle {
    text-transform: uppercase;
    color: #fff;
    font-weight: normal
    }
.clear {
    clear: both
    }
form.form_center {
    width: 400px;
    margin: 0 auto
    }
.btn-full {
    height: 35px;
    width: 87.5%;
    background-color: #223442;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    outline: none
    }
/*================= live ================*/
.live_show {
    height: 100%;
    width: 100%;
    /*background-color: rgba(8, 13, 17, 0.77);*/
    /*background-color: rgba(255, 255, 255, 0.35);*/
    background-color: rgba(27, 34, 39, 0.5);
    margin: 0 0;
    padding: 20px 20px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    color: #FFF
    }
maximeshr

Ce serait pas un problème de police sur ton MBP ?
Parce que la police de la navbar semble différente d'un screenshot à l'autre ?

Est-ce le même navigateur ? Si oui, n'es-tu pas en zoom sur le MBP ?

Cordialement,
M. (#mLF)

DrustWeb
Auteur

C'est peut être un problème de police. Il me semble que la taille des polices changent sur MAC. Il faut plutôt mettre les tailles de police en % ?

Ce sont les même navigateurs (chrome). Le zoom est du au screen que l'on m'a envoyé. Est-ce qu'il ne faut pas préciser une largeur maximale ou minimale dans les balises head ?

Merci de votre intérêt porté à mon problème :)

DrustWeb
Auteur

Salut,

J'ai enfin eu un retour sur MAC. Le site fonctionne bien, tout est bien en place. Il s’embrelait que ce soit la font google qui est réglé le problème.

Merci pour ta réponse Govan06 et merci aux autres d'avoir prêté attention à mon problème.