Bootstrap sidemenu/headermenu werkt niet voor ipad

Door Kees Mulder op 26-12-2014 16:49

1.372 views

Ik ben bezig met een responsive website met bootstrap (nieuwste versie). Voorbeeld van de website is hier te zien.

Als ik op mijn laptop het scherm kleiner maak dan verdwijnt de sidebar en komt de header menu te zien die je kan aanklikken. Dit werkt ook op mijn iphone.

Alleen als ik op mijn ipad kijk dan blijft hij zoals op gewone scherm dus met sidebar en normale header.

Ik wil graag op mijn ipad ook dat de sidebar weg is en dat in de header een dropdown menu is. Heeft iemand een idee?

Eddy E

27-12-2014 06:51

Een iPad schijnt nogal eigenwijs te zijn en kunstmatig het aantal pixels te verdubbelen (het x2). Dit komt ook voor bij afbeeldingen.

Een oplossing kan zijn om in 'em' te werken en niet meer in pixels.
Een andere (in mijn ogen betere en meer logische) oplossing is te kijken naar de -webkit-min-device-pixel-ratio!
Dus zoiets:

/* iPad (3rd gen), both orientations */ 
@media only screen and (min-device-width : 1536px) and (max-device-width : 2048px) and (-webkit-min-device-pixel-ratio: 2)

Bron: http://www.quora.com/How-does-the-new-iPads-resolution-play-with-responsive-design

Joakim Broden

27-12-2014 11:50

Eddy E op 27/12/2014 06:51:42

Een iPad schijnt nogal eigenwijs te zijn en kunstmatig het aantal pixels te verdubbelen (het x2). Dit komt ook voor bij afbeeldingen.

Zoiets noem je retina displays ;-) heb je ook x3 van

Reageren

Inloggen om te reageren