Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

Gebruik <link media> voor specifieke css files

None
7 antwoorden
  • Hoi allemaal,
    Ik beheer de website van mijn vakgroep (http://cheme.nl/ppe) en wil deze ook graag goed zichtbaar hebben op smartphones.
    Dit wil ik bereiken door met <link media=""> tags te controleren op wat voor scherm de site bekeken wordt en daar de stylesheet op aan te passen. Ik gebruik hiervoor onderstaande code:

    [code:1:8fc3de378e]<!– For normal computers and tablets–>
    <link rel="stylesheet" href="/ppe/CSS_files/layout.css" media="screen and (min-device-width: 641px)" type="text/css" />

    <!– For smart phones –>
    <link type="text/css" rel="stylesheet" media="only screen and (min-device-width : 320px) and (max-device-width : 640px)" href="/ppe/CSS_files/layoutmob.css" />

    <!– For PDAs and older smart phones/mobile phones –>
    <link rel="stylesheet" href="/ppe/CSS_files/layoutmob.css" media="handheld" type="text/css" />

    <!–[if IE]>
    <link rel="stylesheet" href="/ppe/CSS_files/layout.css" media="screen" type="text/css" />
    <![endif]–>[/code:1:8fc3de378e]

    Ik heb getest op mijn eigen Desire S (android browser) en daar gebeurt iets vreemds. Op het moment dat ik een link direct laad, door het adres in de locatie-balk te tikken, dan werkt de code perfect. Maar als ik vervolgens op links binnen de pagina klik of de pagina herlaad, krijg ik op mijn smartphone toch weer de `normale' stylesheet.

    Heeft iemand enig idee hoe dit komt en, belangrijker, hoe ik het kan verhelpen?!

    Alvast dank!
  • Mobiele browsers gebruiken allerhande trucs om websites goed op de beperkte ruimte van een mobiele telefoon te tonen. Een onderdeel van die trucs is het schalen van de website door te doen alsof er een grotere viewport is dan de werkelijke resolutie van het toestel. In moderne browsers is dit gedrag te beïnvloeden, probeer eens deze code toe te voegen aan de html van je pagina:[code:1:cd7ea0f4cf]<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi" />[/code:1:cd7ea0f4cf]Tekst en uitleg.

    - Bas
  • Hoi bas,
    Dank voor de tip en uitleg!

    Ik heb echter een iets andere oplossing nodig: ik wil namelijk wel herkennen dat er een smartphone gebruikt wordt, maar de viewport niet vastzetten. Ik heb het nu `opgelost' door om max-device-width:800px te vragen.

    Daarmee vang ik hoogstwaarschijnlijk alle smartphones en vrijwel geen normale computer schermen. Overigens is het ook geen ramp als dat wel gebeurt, het hoofddoel van de andere .css is om geen overflow:auto te gebruiken ivm compatibility van android (en iOS toch ook wel een beetje)
  • Nee, ik denk dat je niet precies hebt begrepen wat mijn oplossing doet, dus ik vermoed dat je het niet geprobeerd hebt. (Zo wel, mijn excuses, maar je reactie impliceert wat anders.) Wat de gegeven code doet is ervoor zorgen dat jouw oplossing ook werkt zoals je zou verwachten, iets dat niet zo vanzelfsprekend is. De link die ik heb gegeven klopt, maar de site lijkt momenteel niet te werken (net nog wel). Ik stel voor dat je dat een keer leest als het weer te bereiken is.

    [b:6c2c49b4bc]Edit:[/b:6c2c49b4bc] Ik lees net mijn reactie na, en ik zie nu dat het arroganter overkomt dan ik bedoel. Dus alsnog mij excuses hiervoor.

    - Bas
  • Overigens werkt het bij mij in de Android Browser helemaal niet, maar in Opera Mobile wel. Even Googlen leert dat het een bekend probleem van de Android Browser is, er wordt wel een suggestie gegeven voor een tijdelijke oplossing.

    - Bas
  • Ik heb de tag wel degelijk geprobeerd, maar wat het probleem is, is dat ik dynamisch herschaalbare div's gebruik die zich dan op de viewport aanpassen. Of misschien dat er iets anders mis gaat, maar in ieder geval komt de pagina er volledig vervormd uit met deze tag in gebruik, vandaar mijn eigen workaround. Ik wil namelijk wel dat de pagina zowel op een iPhone als op een Android telefoon goed zichtbaar is (als ze dan iets van elkaar verschillen vind ik het niet eens zo'n ramp, als ze maar goed leesbaar zijn)

    Wat ik me nu afvraag is of het mogelijk is om de initiele zoom van de mobiele browser zo in te stellen dat de pagina in de breedte exact op het scherm past. Ik gebruik nu de volgende tag:

    [code:1:14574d5c9a]<meta name = "viewport" content = "initial-scale = 0.7, user-scalable = yes" /> [/code:1:14574d5c9a]

    Maar ik zou dus graag in plaats van 0.7 iets in de trant: pagewidth/devicewidth gebruiken.

    Enig idee?
  • [quote:0b3ea8d191="pc_freak17"]Wat ik me nu afvraag is of het mogelijk is om de initiele zoom van de mobiele browser zo in te stellen dat de pagina in de breedte exact op het scherm past.[/quote:0b3ea8d191]Wat ik begrijp van de pagina op het Opera Developer gedeelte is dat de browser altijd de pagina precies in de breedte passend op het scherm zet. Standaard staat de viewport op 850 pixels, bij bredere layouts wordt de layout voor mobiel door de browser zelf aangepast. Een oplossing kan zijn om een eigen breedte te definiëren waarbij de site goed te lezen is zonder al te veel misvormingen. Dus bijvoorbeeld een viewport instellen van 550 pixels (wordt ook in het artikel genoemd). Of het werkt in de Android Browser heb ik niet getest, maar als je het toepast op de site wil ik het voor je testen.

    - Bas

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.