CSS conflict

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Joep de Jong

Joep de Jong

22/12/2013 13:26:28
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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"/>

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
 
PHP hulp

PHP hulp

24/04/2024 07:27:26
 
Machiel K

Machiel K

22/12/2013 16:56:58
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
@media (max-width: 600px) {

}


Vervolgens in je index.php/index.html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.