CSS conflict
Hallo allemaal,
de css op mijn site werkt niet helemaal vlekkeloos,
zodra ik hem op een iPad open worden er dingen verborgen die wel weergegeven moeten worden,
waardoor er bijvoorbeeld wel een menubalk is, maar geen inhoud.
Het conflict bevindt zich in de head:
Ik kom er alleen niet uit.
De onderste 3 zijn voor iPhone, iPhone 5 en iPad.
Toevoeging op 22/12/2013 13:32:30:
Het gaat om: Joep4U.com
de css op mijn site werkt niet helemaal vlekkeloos,
zodra ik hem op een iPad open worden er dingen verborgen die wel weergegeven moeten worden,
waardoor er bijvoorbeeld wel een menubalk is, maar geen inhoud.
Het conflict bevindt zich in de head:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<link rel="stylesheet" media="screen and (min-width: 925px)" href="../../style.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 925px)" href="../../stylemid.css"/>
<link rel="stylesheet" media="screen and (max-width: 600px)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 2/3)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 3/4)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 925px)" href="../../stylemid.css"/>
<link rel="stylesheet" media="screen and (max-width: 600px)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 2/3)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 40/71)" href="../../stylesmall.css"/>
<link rel="stylesheet" media="screen and (device-aspect-ratio: 3/4)" href="../../stylesmall.css"/>
Ik kom er alleen niet uit.
De onderste 3 zijn voor iPhone, iPhone 5 en iPad.
Toevoeging op 22/12/2013 13:32:30:
Het gaat om: Joep4U.com
Ik zou het anders aanpakken.
In je .css file, bijvoorbeeld responsive.css, zet je het volgende. En 600px vervangen je dan door de gewenste waarde:
Vervolgens in je index.php/index.html:
Ik heb zelf responsive.css als een appart bestandje. Dit geeft voor mijzelf wat meer overzicht.
De <meta name="viewport" ..... /> zorgt ervoor dat de website zich aanpast aan de breedte van het scherm.
In je .css file, bijvoorbeeld responsive.css, zet je het volgende. En 600px vervangen je dan door de gewenste waarde:
Vervolgens in je index.php/index.html:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<head>
<title> ... </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link type="text/css" rel="stylesheet" href="/normaal.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/responsive.css" media="screen" />
</head>
<title> ... </title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link type="text/css" rel="stylesheet" href="/normaal.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/responsive.css" media="screen" />
</head>
Ik heb zelf responsive.css als een appart bestandje. Dit geeft voor mijzelf wat meer overzicht.
De <meta name="viewport" ..... /> zorgt ervoor dat de website zich aanpast aan de breedte van het scherm.