festen Header auf Mobil mit übergroßer Seite Körper

Question

Ich habe eine Webseite mit einem festen Header wie üblich:

.header{ 
position: fixed; 
top: 0px; 
left: 0px; 
width: 100%; 
} 

Der Hauptteil der Seite ist ein Bild, das svg 1200px breit ist. Auf Mobilgeräten wird die Kopfzeile auf 1200px gestreckt und muss gescrollt werden, um alles anzuzeigen.

Ich möchte die Kopfzeile wie eine feste Kopfzeile verhalten sollte - genau die Breite des Bildschirms sein, und bleiben Sie fest - unabhängig davon, ob der Hauptkörper vertikal oder horizontal gescrollt wird, und optimal, auch wenn es gezoomt ist.

EDIT: Ich versuchte mit 100vw anstelle von 100% und es funktioniert ein wenig besser - der Header erweitert nicht breiter als der Bildschirm. Aber der Header scrollt immer noch von der Site, wenn er den Körper scrollt.

Update: Aus den Kommentaren sieht es aus, als ob Sie alle nicht das Problem bekommen. Hier ist ein Codepen zu demonstrieren. Wenn Sie es auf dem Desktop anzeigen, funktioniert es gut. Aber wenn ich es auf meinem iPhone 5 Safari Browser ansehe, wird der Header auf die Breite des Bildes gestreckt.

http://codepen.io/life4ants/full/LWybQZ/

Answer 1

Ich reparierte diese durch diese Meta-Tag hinzu:

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

Und das Einwickeln der Seite mit:

.bg{ 
    width: 100%; 
    height: 100%; 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch; 
}