Mobile Site ignoriert Meta = Ansichtsfenster und zoomt keinen Daumen oder Inhalt

Question

Es scheint alles, was ich als Meta für mobile Version der Website arbeiten, es wird tatsächlich ignoriert und ist voll gezoomt (wenn ich meine Website besuchen auf ein Handy) zu der tatsächlichen Größe von dem, was ich in CSS habe.

> I tried : 
> <meta name="viewport" content="width=device-width,> initial-scale=1, maximum-scale=1"> & 
> <meta name="viewport"> content="width=device-width"> 

als eine Angelegenheit der Tatsache, nahm ich völlig, dass die Linie in der Hoffnung off es nicht skaliert, aber es immer noch Zoom-In!

Die Kopfzeile, scheint in Ordnung zu sein, und skaliert gut auf Handy, aber alles andere, ist gezoomt.

Beispiel: Daumen ist 728x410 in CSS, noch, mit oder ohne das mobile Meta-Viewport, es hat immer noch die gleiche Größe auf dem Handy, die es riesig macht!

Auch, wenn die Website auf Handy geladen wird, funktioniert die tatsächliche Meta = Ansichtsfenster, was bedeutet, wenn ich auf Mobile 320 px eingestellt haben, zeigt die Daumen wie es soll, aber wenn Website voll geladen ist, Penner .. zurück zu 728px die ich in css habe!

Kann jemand das beheben? Danke!

Answer 1

Nachdem ich viele reaktionsschnelle Websites erstellt habe, muss ich feststellen, dass Inhalte, die breiter sind als der mobile Bildschirm (in diesem Fall 320px, nur Iphone?), Alles durcheinander bringen. Um dies zu lösen, stellen Sie sicher, dass Sie ein paar Haupt-Wrapper um Ihren Inhalt wie eine header, content und footer Div haben. diesen divs Geben Sie die folgenden CSS-Regeln, wenn sie auf Mobil:

@media screen and (max-device-width: 480px) { 
    .header,.content,.footer{ 
    display:block; 
    position: relative /*for absolute positioning or to get them behind 
         pop-ups with z-index 
         this also prevents absolute-position elements being outside 
         the parent element from stretching the view*/ 
    width:100%; 
    overflow:hidden; 
    } 
} 

Die oben sollte Ihre Skalierung von vermasselt alles verhindern. Von dort können Sie sehen, welche Elemente nicht passen und sie entsprechend stylen.

Auch, wenn Sie Zoomen nicht zulassen wollen, müssen Sie wie so in user-scalable=0 setzen:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
user-scalable=0' name='viewport' /> 

Achten Sie darauf, Ihre Inhalte tatsächlich herunterskaliert auf Ihre Bildschirmgröße des Telefons. Es wird einen großen Unterschied machen. Ich würde Ihnen auch persönlich empfehlen, sich an die Verwendung von box-sizing:border-box; zu gewöhnen. Dies bedeutet, dass alle Elemente, die sind, aus dem Element nicht als zum Element hinzugefügt werden.

Beispiel: Ihr Bildschirm ist 320 Pixel breit. Sie haben eine <div width="320"></div>, es wird 320px breit sein. Hinzufügen padding:20px es, wird es 360px breit (20px Polsterung an beiden Seiten)

jedoch box-sizing:border-box verwendet, wird sicherstellen, dass es bei 320px (gleich mit 100% Breite) bleibt und stattdessen wird der Inhalt innerhalb der übrig gebliebenen passen werden 280px. Nur ein Hinweis.

auch: Welche Art von Medienabfragen verwenden Sie in Ihrer CSS-Datei?

-Update speziell für Ihre Website habe ich es so sein: --img aus Datenschutzgründen entfernt -

Das ist die CSS-Änderungen sind ich einschließlich dem Hinzufügen des Meta-Tages gemacht habe in Meine Antwort auf Ihren Kopf, ersetzen Sie Ihre:

#headerContent { 
    width: 100%; 
    height: 40px; 
    margin: 0 auto; 
} 

#mainContainer { 
    width: 100%; 
    margin: 0 auto; 
} 
.videoListItem .thumb img { 
    position: absolute; 
    width: 100%!important; 
    overflow: hidden; 
    top: -68px; 
    left: 0; 
} 

#leftColumn { 
    float: left; 
    width: 100%; 
} 

.videoListItem .thumb .playIcon { 
    background: url(./images/play_icon.png) no-repeat 0 0; 
    top: 50%; 
    left: 50%; 
    width: 86px; 
    height: 60px; 
    position: absolute; 
    margin-top: -30px; 
    margin-left: -43px; 
}