1. Zuhause
  2. Frage und Antwort
  3. Responsive funktioniert nicht in Telefon

Responsive funktioniert nicht in Telefon

2016-04-21 3 views
1

ich eine Website zu erstellen, und ich mache Saum reaktions mit @media, Alle Dinge sind richtig, wenn ich mit Mozilla Schlankheits Ich habe kein ProblemResponsive funktioniert nicht in Telefon

aber wenn ich meine Seite sehen mit meinem Handy alles verloren gehen, sehe ich eine Katastrophe: "(

ich mache Mozilla Größe { 1280px, 980px, 800px, 768px, 360px, 320px }

@media only screen and (max-width : 992px) { 
 
body { 
 
\t background:url(img/Saad.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo { 
 
\t background: transparent url("img/logo.png") no-repeat scroll center top; 
 
\t width: 212px; 
 
\t height: 89px; 
 
\t position: absolute; 
 
\t top: 85px; 
 
\t margin-left: 702px; 
 
} 
 

 
.gauche { 
 
\t margin-top : -253px; 
 
\t float: left; 
 
\t width: 250px; 
 
\t height: 75px; 
 
\t position: absolute; 
 
\t margin-left: 15px; \t 
 
\t } 
 

 
.rs li { 
 
\t float: left; 
 
\t width: 47px; 
 
\t height: 47px; 
 
\t margin:0px 4px 0px 0px; 
 
} 
 

 
.players { 
 
    width: 700px; 
 
    margin: 321px auto; 
 
    display: block; 
 
    position: relative; 
 
    height: 90px; 
 
} 
 

 
.hicham{ 
 
\t display: block; 
 
\t margin: -563px 140px 79px 130px; 
 
\t position: absolute; 
 
} 
 
.hand{ 
 
\t display: block; 
 
\t margin: -495px 0px 94px 357px; 
 
} 
 

 
.basket{ 
 
\t margin: -906px 0px 98px 260px; 
 
} 
 

 
.foot, .hicham, .hand, .basket{ 
 
\t -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     -ms-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
} 
 

 
.foot:hover, .hicham:hover { 
 
    -webkit-transform: rotate(-10deg); 
 
    -moz-transform: rotate(-10deg); 
 
     -o-transform: rotate(-10deg); 
 
     -ms-transform: rotate(-10deg); 
 
      transform: rotate(-10deg); 
 
} 
 

 
.hand:hover, .basket:hover{ 
 
    -webkit-transform: rotate(10deg); 
 
    -moz-transform: rotate(10deg); 
 
     -o-transform: rotate(10deg); 
 
     -ms-transform: rotate(10deg); 
 
      transform: rotate(10deg); 
 
} 
 

 
a li{ 
 
list-style: none; 
 
} 
 

 
.fb { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

 
.twitter { 
 
\t background: transparent url("icon/twitter.png") no-repeat scroll center top; 
 
\t } 
 

 
.instagram { 
 
\t background: transparent url("icon/icon4.png") no-repeat scroll center top; 
 
} 
 

 
.youtube { 
 
\t background: transparent url("icon/youtube.png") no-repeat scroll center top; 
 
} 
 

 
.sponsors { 
 
\t display: block; 
 
\t width: auto; 
 
\t height: 65px; 
 
\t background: #FFF url("img/pubb.png") no-repeat scroll center top; 
 
\t margin-top: 320px; 
 
} 
 

 
.copyright { 
 
\t font-family: monospace; 
 
\t color: #FFF; 
 
\t text-transform: inherit; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin-top: 30px; 
 
\t font-weight: bold; 
 
\t font-size: 12px; 
 
} 
 
} 
 

 

 
/* Medium Devices, Desktops */ 
 
@media only screen and (max-width : 800px) { 
 
body { 
 
\t background:url(img/Saad.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo { 
 
\t background: transparent url("img/logo.png") no-repeat scroll center top; 
 
\t width: 212px; 
 
\t height: 89px; 
 
\t position: absolute; 
 
\t top: 85px; 
 
\t margin-left: 555px; 
 
} 
 

 
.gauche { 
 
\t margin-top : -253px; 
 
\t float: left; 
 
\t width: 250px; 
 
\t height: 75px; 
 
\t position: absolute; 
 
\t margin-left: 15px; \t 
 
\t } 
 

 
.rs li { 
 
\t float: left; 
 
\t width: 47px; 
 
\t height: 47px; 
 
\t margin:0px 4px 0px 0px; 
 
} 
 

 
.players{ 
 
\t width: 700px; 
 
\t margin: 354px auto; 
 
\t display: block; 
 
\t position: relative; 
 
\t height: 90px; 
 
} 
 

 
.hicham{ 
 
\t display: block; 
 
\t margin: -563px 140px 79px 130px; 
 
\t position: absolute; 
 
} 
 
.hand{ 
 
\t display: block; 
 
\t margin: -495px 0px 94px 357px; 
 
} 
 

 
.basket{ 
 
\t margin: -906px 0px 98px 260px; 
 
} 
 

 
.foot, .hicham, .hand, .basket{ 
 
\t -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     -ms-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
} 
 

 
.foot:hover, .hicham:hover { 
 
    -webkit-transform: rotate(-10deg); 
 
    -moz-transform: rotate(-10deg); 
 
     -o-transform: rotate(-10deg); 
 
     -ms-transform: rotate(-10deg); 
 
      transform: rotate(-10deg); 
 
} 
 

 
.hand:hover, .basket:hover{ 
 
    -webkit-transform: rotate(10deg); 
 
    -moz-transform: rotate(10deg); 
 
     -o-transform: rotate(10deg); 
 
     -ms-transform: rotate(10deg); 
 
      transform: rotate(10deg); 
 
} 
 

 
a li{ 
 
list-style: none; 
 
} 
 

 
.fb { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

 
.twitter { 
 
\t background: transparent url("icon/twitter.png") no-repeat scroll center top; 
 
\t } 
 

 
.instagram { 
 
\t background: transparent url("icon/icon4.png") no-repeat scroll center top; 
 
} 
 

 
.youtube { 
 
\t background: transparent url("icon/youtube.png") no-repeat scroll center top; 
 
} 
 

 
.sponsors { 
 
\t display: block; 
 
\t width: auto; 
 
\t height: 65px; 
 
\t background: #FFF url("img/pubb.png") no-repeat scroll center top; 
 
\t margin-top: 320px; 
 
} 
 

 
.copyright { 
 
\t font-family: monospace; 
 
\t color: #FFF; 
 
\t text-transform: inherit; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin-top: 30px; 
 
\t font-weight: bold; 
 
\t font-size: 12px; 
 
} 
 
} 
 

 
/* Small Devices, Tablets */ 
 
@media only screen and (max-width : 768px) { 
 
\t body { 
 
\t background:url(img/Saad.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo { 
 
\t background: transparent url("img/logo.png") no-repeat scroll center top; 
 
\t width: 212px; 
 
\t height: 89px; 
 
\t position: absolute; 
 
\t top: 85px; 
 
\t margin-left: 526px; 
 
} 
 

 
.gauche { 
 
\t margin-top : -237px; 
 
\t float: left; 
 
\t width: 250px; 
 
\t height: 75px; 
 
\t position: absolute; 
 
\t margin-left: 15px; \t 
 
\t } 
 

 
.rs li { 
 
\t float: left; 
 
\t width: 47px; 
 
\t height: 47px; 
 
\t margin:0px 4px 0px 0px; 
 
} 
 

 
.players{ 
 
\t width: 700px; 
 
\t margin: 353px auto; 
 
\t display: block; 
 
\t position: relative; 
 
\t height: 90px; 
 
} 
 

 
.hicham{ 
 
\t display: block; 
 
\t margin: -563px 140px 79px 130px; 
 
\t position: absolute; 
 
} 
 
.hand{ 
 
\t display: block; 
 
\t margin: -495px 0px 94px 357px; 
 
} 
 

 
.basket{ 
 
\t margin: -906px 0px 98px 260px; 
 
} 
 

 
.foot, .hicham, .hand, .basket{ 
 
\t -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
     -o-transition: all 0.5s ease; 
 
     -ms-transition: all 0.5s ease; 
 
      transition: all 0.5s ease; 
 
} 
 

 
.foot:hover, .hicham:hover { 
 
    -webkit-transform: rotate(-10deg); 
 
    -moz-transform: rotate(-10deg); 
 
     -o-transform: rotate(-10deg); 
 
     -ms-transform: rotate(-10deg); 
 
      transform: rotate(-10deg); 
 
} 
 

 
.hand:hover, .basket:hover{ 
 
    -webkit-transform: rotate(10deg); 
 
    -moz-transform: rotate(10deg); 
 
     -o-transform: rotate(10deg); 
 
     -ms-transform: rotate(10deg); 
 
      transform: rotate(10deg); 
 
} 
 

 
a li{ 
 
list-style: none; 
 
} 
 

 
.fb { 
 
\t background: transparent url("icon/facebook.png") no-repeat center top; 
 
} 
 

 
.twitter { 
 
\t background: transparent url("icon/twitter.png") no-repeat scroll center top; 
 
\t } 
 

 
.instagram { 
 
\t background: transparent url("icon/icon4.png") no-repeat scroll center top; 
 
} 
 

 
.youtube { 
 
\t background: transparent url("icon/youtube.png") no-repeat scroll center top; 
 
} 
 

 
.sponsors { 
 
\t display: block; 
 
\t width: auto; 
 
\t height: 65px; 
 
\t background: #FFF url("img/pubb.png") no-repeat scroll center top; 
 
\t margin-top: 320px; 
 
} 
 

 
.copyright { 
 
\t font-family: monospace; 
 
\t color: #FFF; 
 
\t text-transform: inherit; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin-top: 30px; 
 
\t font-weight: bold; 
 
\t font-size: 12px; 
 
} 
 
} 
 

 

 
/* Custom, iPhone Retina */ 
 
@media only screen and (max-width : 360px) { 
 
\t body { 
 
\t background:url(img/Saad.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.logo { 
 
\t background: transparent url("img/logo.png") no-repeat scroll center top; 
 
\t width: 212px; 
 
\t height: 89px; 
 
\t position: absolute; 
 
\t top: 22px; 
 
\t margin-left: 70px; 
 
} 
 

 
.gauche { 
 
\t visibility: hidden; \t 
 
\t } 
 

 

 

 
.players{ 
 
\t margin: 100px 0px 0px -374px; 
 
} 
 

 
.foot{ 
 
\t margin: -1px 0px 0px 417px; 
 
} 
 

 
.hicham{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
} 
 
.hand{ 
 
\t display: block; 
 
\t visibility: hidden; 
 
} 
 

 
.basket{ 
 
\t visibility: hidden; 
 
} 
 

 

 

 
.sponsors { 
 
\t display: block; 
 
\t width: auto; 
 
\t height: 65px; 
 
\t background: #FFF url("img/pubb1.png") no-repeat scroll center top; 
 
\t margin-top: 320px; 
 
} 
 

 
.copyright { 
 
\t font-family: monospace; 
 
\t color: #FFF; 
 
\t text-transform: inherit; 
 
\t display: block; 
 
\t text-align: center; 
 
\t margin-top: 20px; 
 
\t font-weight: bold; 
 
\t font-size: 12px; 
 
} 
 
} 
 

 

 
/* Extra Small Devices, Phones */ 
 
@media only screen and (max-width : 320px) { 
 

 
body{ 
 
background:url(img/Saad.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
\t overflow-x:hidden; 
 
} 
 

 
.players { 
 
    margin: 131px 0px 0px -405px; 
 
} 
 

 
.logo { 
 
\t margin: -9px 0px 0px 49px; 
 
} 
 

 

 
.gauche { 
 
\t visibility: hidden; \t 
 
\t } 
 

 

 
.sponsors { 
 
    display: block; 
 
    width: auto; 
 
    height: 25px; 
 
    background: #FFF url("img/pubb1.png") no-repeat scroll center top; 
 
    margin-top: 148px; 
 
} 
 

 
\t 
 

 
.foot{ 
 
\t margin: -28px 0px 0px 461px; 
 
\t width: 200px; 
 
} 
 

 
.hicham{ 
 
\t display: block; 
 
\t position: absolute; 
 
\t visibility: hidden; 
 
} 
 
.hand{ 
 
\t display: block; 
 
\t visibility: hidden; 
 
} 
 

 
.basket{ 
 
\t visibility: hidden; 
 
} 
 

 
.copyright { 
 
\t font-family: monospace; 
 
color: #FFF; 
 
text-transform: inherit; 
 
display: block; 
 
text-align: center; 
 
margin-top: 6px; 
 
font-weight: bold; 
 
font-size: 12px; 
 
} 
 
}

Irgendwelche Hilfe?

Quelle

2016-04-21 sayou

+1

Es wäre sehr hilfreich Wenn Sie Ihre css Medienabfragen – boernard

+0

@ boernard gepostet habe, mache ich es – sayou

Antwort

1

Mobile Browser versuchen, Ihre Website gut aussehen zu lassen, damit sie Ihre Website nicht Pixel für Pixel darstellen, wie Sie es erwarten. Beispiel: Nehmen wir an, Ihr Telefon hat eine Breite von 250px, aber Ihr Telefon könnte Ihrer Website sagen, dass es 500px oder sogar 1000px breit ist, was wiederum Ihre @ media-Abfragen obsolet macht.

Nach dieser langen Erklärung, das ist, was Sie zum <head> Ihres HTML-Code hinzufügen müssen: <meta name="viewport" content="width=device-width, initial-scale=1">, dass Ihr Telefon (und alle anderen Telefone) Ihre Website sagen, machen sollte, was die Breite des Telefons wirklich ist. Und alle Ihre @ media-Abfragen sollten funktionieren.

Hoffe, dass geholfen hat!

Hier einige Artikel wert für weitere Informationen Check-out:

  1. CSS Tricks: https://css-tricks.com/snippets/html/responsive-meta-tag/
  2. MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  3. Envato Tuts +: http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

Quelle

2016-04-21 01:39:20

+0

Zuerst ist es Arbeit nur für das Telefon Oder alle Dinge wie Tabletten .. etc? Ich mache den Meta-Code, das ist Arbeit, aber ich habe ein paar Probleme zum Beispiel Ich mache etwas Display keine, wo die Größe ist Telefon, aber wenn ich mit meinem Handy sehe ich diese Dinge? Wie kann ich es reparieren? – sayou

+0

@sayou Es funktioniert mit allen Geräten. Das Problem "display: none;" könnte sein, dass Ihr Telefon zu groß ist, um die Medienabfragen auszulösen. Versuchen Sie, Ihre Medienanfragen zu vergrößern, d. H., Wenn Sie glauben, dass Ihr Telefon 320px groß ist, versuchen Sie, das HTML-Element bei 500px verschwinden zu lassen, nur um zu testen, ob Ihre Medienabfrage wirklich funktioniert. Wenn Ihr HTML-Element verschwindet, wissen Sie, dass Ihre Medienabfrage funktioniert und auf eine kleinere Bildschirmgröße ausgerichtet ist als auf Ihrem Telefon. Wenn das HTML-Element immer noch nicht verschwindet, wissen Sie, dass Ihre Medienabfrage nicht funktioniert oder dass das Element, das Sie wirklich möchten, nicht ausgewählt wird. –

 Verwandte Themen

  • Keine verwandten Themen^_^