ipad pushed menu

[feint]

Hallo allemaal,

Ik ben bezig met een responsive design te maken. Op zich heb ik het menu goed alleen op de ipad werkt die niet.

Als ik mijn ipad horizontaal heb en ik laad de website staat die goed, als ik hem daarna verticaal zet, wordt het menu netjes aangepast aan de responsive versie, maar zodra ik terug ga naar horizontaal dan pushed de ipad het menu omlaag.

Ik heb de testversie even online gezet om het menu te testen.
www.dreamlike.nl

Ik kom er alleen niet achter waar het probleem zit. Als ik de resolutie via http://cybercrab.com/screencheck/ test werkt die gewoon, maar op de echte ipad niet.

Misschien dat jullie mij kunnen helpen.

 

[damnsharp]

Goh wat een vervelend probleem zeg. Ik merk ook als ik de iPad (1) van portret naar landschap (dus draai) dan wordt de site eigenlijk ook te breed, het menu schiet onder logo en ik kan naar rechts scrollen. Bij een refresh schiet het menu naar boven maar nog steeds kan ik naar rechts scrollen.
Bij deze site als je op rotate klikt zie je wel dat er ineens gescrolled kan worden.
Heb je media query's gebruikt? Oh wacht, zie het al in de CSS. Ik zal ook nu even gaan zoeken in je code naar een oplossing. Kan er zondag pas goed naar kijken.

 

[damnsharp]

Als je de #PageContainer min-width eens kleiner dan 800px zet, bijv. 770px en dan header padding left naar 20px? Ik kan het niet goed testen maar volgens mij kan dat iets opleveren want dan denk ik dat er meer ruimte ontstaat bij draaien.

 

[feint]

Ik heb eens gekeken naar wat je zei en wat gespeeld met de paddings en min-width van de header. Als ik de min-width op 770 zet en de padding van de header op 20px, dan pusht de ipad het menu altijd omlaag (maar in een normale browser weer niet, zelfs niet als ik dezelfde resolutie aanneem van de ipad.)

Ik denk dat hij of niet genoeg ruimte krijgt, of de float niet goed werkt bij de ipad als je hem 2x draait.
Als ik de min-width op 960 zet en padding van de header op 0, pushed de ipad hem nog altijd omlaag als ik hem 2x draai terwijl er tussen het logo en het menu makkelijk 200-300 pixels zit.

Heel vervelend dat er geen goede firebug is voor ipad.. ik hem een javascript plugin gevonden maar dat werkt niet heel erg goed.

iig al bedankt voor je replies. Ik ga maar weer even verder met kijken voor een oplossing.

 

[feint]

Ik ben erachter gekomen dat als ik de tag nav vervang met een aside dat hij dan wel op de ipad werkt.
Als ik de nav op float:right zet, doet die het niet. Zet ik de aside op float:right doet die het wel. heel raar.

Iemand een idee waar dit aan kan liggen?

 

[damnsharp]

Chips, dat weet ik ook niet. Ik zal even reageren want komt bericht misschien nog extra onder de aandacht voor collega helpmij-er

 

[feint]

Probleem zat schijnbaar dat Aside automatisch display op inline zet terwijl nav dit niet doet. Toen ik de display veranderde naar inline werkte de website weer normaal.

De scroll die jij zag op 800px kwam omdat de pagecontainer op min-width van 800 stond. Dit heb ik nu omgezet dat hij overgaat naar de responsive versie bij 800px, deze stond eerst op 768 maar daar werkte het menu niet op omdat deze dan te breed werd voor de pagina.

Nu nog maar even testen of alle problemen met het menu zijn opgelost.

iig bedankt voor je replies.