Position des Elements anders auf Desktop vs Handy

-1

So habe ich meine Media-Abfragen festgelegt, um ein Element positioniert X Pixel relativ zum vorherigen Element bei einer Mindestbreite von 756px (die Auflösung von meinem iPhone 6S) haben. Auf meinem Windows-Desktop positionierte ich das Element dort, wo ich es haben möchte. Wenn ich jedoch die Seite auf meinem iPhone öffne (mit dem Standard-Safari-Browser), ist das Element um mehr als hundert Pixel ausgeschaltet! Das Element ist auf meinem iPhone höher positioniert als auf meinem Desktop. Irgendwelche Ideen? Ich habe meine Zooms in meinem Desktopbrowser überprüft und sie sind alle auf 100% gesetzt.Position des Elements anders auf Desktop vs Handy

bearbeiten: Hier ist eine Geige Mock-up meines Codes. https://jsfiddle.net/8f6y1pdx/1/

<header> 
    <div id = "navContainer"><h1>Hello</h1></div> 
    <div id = "backgroundImage"><img src = "http://cdn.wallpapersafari.com/4/18/laMvrx.jpg" width = "2560" alt = "bg image"></div> 
</header> 

<body> 
    <div id = "contentOneContainer">Container one</div> 
    <div id = "contentTwoContainer">Container two</div> 
</body>

und die CSS

html, body{ 
    padding: 0; 
    margin: 0; 
} 

#navContainer{ 
    position: fixed; 
    z-index: 0; 
    width: 100%; 
    background-color: black; 
    color: white; 
    height: 100px; 
    text-align: center; 
} 

#backgroundImage{ 
    position: fixed; 
    z-index: -2; 
} 

#backgroundImage img{ 
    width: 100%; 
    max-width: 2560px; 
} 

#contentOneContainer{ 
    width: 100%; 
    height: 500px; 
    background-color: blue; 
    position: relative; 
    top: 417px; 
    z-index: 0; 
    color: white; 
} 

#contentTwoContainer{ 
    width: 100%; 
    height: 250px; 
    background-color: gray; 
    position: relative; 
    top: 417px; 
    z-index: 0; 
    color: white; 
} 

/*----------------------------------*\ 
    Responsive 
\*----------------------------------*/ 
@media (min-width: 757px){ 
    #contentOneContainer{ 
    background-color: red; 
    } 
}

Wenn Sie die Bildschirmgröße anpassen, bei 757px habe ich die Hintergrundfarbe des Behälters Schalter. Im Grunde reihe ich auf meinem Desktop den unteren Teil des Bildes mit dem oberen Teil des ersten Containers ab. Auf meinem iPhone 6s (ich weiß nicht, wie man das macht, wenn man die Geige auf dem Handy sieht) sind der untere Teil des Bildes und der obere Teil des Containers hundert plus Pixel voneinander entfernt. Ich hoffe das hilft ein wenig. Tut mir leid, wenn mein Code bläst.

Quelle

2016-10-12 ewrjontan

Geifern Sie Ihren Code. Es wird dir einfach helfen. – ilmk

Gehen Sie und suchen Sie auf Google –

Hinzugefügt einen Geige plus Code. – ewrjontan

Fügen Sie im Kopfbereich das Viewport-Metatag hinzu, damit die Medienanfragen auf dem Handy funktionieren.

http://getbootstrap.com/css/#overview-mobile

Quelle

2016-10-12 03:55:48

Während der Link die Frage beantworten kann, ist es immer am besten, die wichtigsten Teile des Links direkt in die Antwort einzufügen. Dies dient zwei Zwecken: Leuten wird die Mühe erspart, einen externen Link zu besuchen, und selbst wenn die Verbindung unterbrochen ist, können Leute die Information in Ihrer Antwort noch finden. –

Versucht, – ewrjontan

Gepresste Eingabe zu früh! Wie auch immer, ich habe das hinzugefügt und es wirft alles weg. Warum das? Es wird jetzt angezeigt, als ob nicht bei einer 756px Breite:/ – ewrjontan

Position des Elements anders auf Desktop vs Handy

Antwort

Verwandte Themen