Responsive webdesign

Hi guys,

Ik zit even met een probleempje, ik wil namelijk bepaalde elementen niet op mijn website als deze bezocht worden door een mobiel of tablet.

Hiervoor gebruik ik dit stukje code op aanpassingen door te voeren voor de telefoon:

Codeblok (voorbeeld.php):

1
2
3

@media screen and (max-width: 480px) {

}

Maar hoe moet ik dingen weg laten die ik niet op een mobiel of tablet wil hebben?

Alvast bedankt.

Groet,

Patrick

@media screen and (max-width: 480px) {
    div {
        display: none;
    }
}

Gewoon altijd die property gebruiken.

@media screen and (max-width: 632px) {
#logo {
display:none;
}

#weergave_tijd {
display:none;
}
}

Ben hier ook mee bezig

Maartenf schreef:

@media screen and (max-width: 480px) {
    div {
        display: none;
    }
}

Gewoon altijd die property gebruiken.

Ohja logische.. Bedankt.

En stel ik wil een totaal andere header of logo gebruiken. Moet ik dan eerst dat element afsluiten of kan ik dan direct gewoon aan die elementen een style mee geven?

toevoeging op 15 september 2013, 16:23:59:
Is er ook een manier dat je niet kan inzoomen zeg maar?

Patricka schreef:

Eerdere citaten tonen

Maartenf schreef:

@media screen and (max-width: 480px) {
    div {
        display: none;
    }
}

Gewoon altijd die property gebruiken.

Ohja logische.. Bedankt.

En stel ik wil een totaal andere header of logo gebruiken. Moet ik dan eerst dat element afsluiten of kan ik dan direct gewoon aan die elementen een style mee geven?

toevoeging op 15 september 2013, 16:23:59:
Is er ook een manier dat je niet kan inzoomen zeg maar?
Je kan CSS overschrijven jah.

Oke, bedankt. Sorry voor zoveel vragen, maar voor het eerst dat ik met responsive websites ga werken.

Ik zat nu te kijken om de website style en de device style een ander css bestand te geven. Maar klopt het dat dat niet kan? Want dan laat hij namelijk de website zien zoals die op een computer is.

Patricka schreef:

Oke, bedankt. Sorry voor zoveel vragen, maar voor het eerst dat ik met responsive websites ga werken.

Ik zat nu te kijken om de website style en de device style een ander css bestand te geven. Maar klopt het dat dat niet kan? Want dan laat hij namelijk de website zien zoals die op een computer is.

Volgens mij kun je bij het inladen van een css bestand ook media queries meegeven, zoals:

Codeblok (voorbeeld.php):

1

Dat werkt niet.

Dylanh schreef:

http://css-tricks.com/css-media-queries/

Zoek de verschillen tussen mijne en jouwe.

Perryz schreef:

Eerdere citaten tonen

Dylanh schreef:

http://css-tricks.com/css-media-queries/

Zoek de verschillen tussen mijne en jouwe.

- Ik heb een andere naam
- Ik heb een andere profielfoto
- Ik heb meer feedbacks
-Ik laat me punten zien
- Ik heb meer actief dingen
- Ik heb mijn bericht niet in code tags gezet
- Ik heb de bron erbij gezet

Patricka schreef:

Is er ook een manier dat je niet kan inzoomen zeg maar?

<meta name="viewport" content="width=device-width, user-scalable=false;">

@patrick en anderen.
Zorg dat je makkelijk kan overschakelen naar de desktopversie van je website. Niets zo vervelend als een verplichte mobile website terwijl je device prima de desktopversie aan kan.
Vaak al een reden voor mij om dat soort sites te skippen.

toevoeging op 15 september 2013, 23:27:51:
Oh en inzoomen uitzetten is ook enorm vervelend. Ik wil op elke website kunnen inzoomen als ik dat zelf wil, soms is dat gewoon handig om bijvoorbeeld op een linkje te klikken.

Robbert schreef:

@patrick en anderen.
Zorg dat je makkelijk kan overschakelen naar de desktopversie van je website. Niets zo vervelend als een verplichte mobile website terwijl je device prima de desktopversie aan kan.
Vaak al een reden voor mij om dat soort sites te skippen.

toevoeging op 15 september 2013, 23:27:51:
Oh en inzoomen uitzetten is ook enorm vervelend. Ik wil op elke website kunnen inzoomen als ik dat zelf wil, soms is dat gewoon handig om bijvoorbeeld op een linkje te klikken.

Als het gemaakt is als webapp, dan hoeft dat niet, dan zijn de linkjes groot genoeg.
In een gewone (native) app zoom je toch ook niet in?

Btw deze code in je head zetten:

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

Werkt prima

Robbert schreef:

@patrick en anderen.
Zorg dat je makkelijk kan overschakelen naar de desktopversie van je website. Niets zo vervelend als een verplichte mobile website terwijl je device prima de desktopversie aan kan.
Vaak al een reden voor mij om dat soort sites te skippen.

toevoeging op 15 september 2013, 23:27:51:
Oh en inzoomen uitzetten is ook enorm vervelend. Ik wil op elke website kunnen inzoomen als ik dat zelf wil, soms is dat gewoon handig om bijvoorbeeld op een linkje te klikken.

Ik zat er al over na te denken om een optie te maken dat men hem ook als gewone website kan zien. Moet alleen even kijken hoe ik dit het beste kan gaan doen.

Daarnaast is het niet nodig om in te zoomen omdat de tekst altijd al wel goed leesbaar is op een mobiele device. Inzoomen op de gewone website kan uiteraard wel gewoon.

@Jesse, bedankt ik ga het zo even testen.

toevoeging op 16 september 2013, 19:21:45:
Bedankt Jesse, het werkt.