CSS / style selectie op basis van user device

[Verwijderd]

Ik heb een probleempje waar ik zo een, twee, drie geen oplossing voor kan vinden. Het gaat om wat background images die ik gebruik op mijn site, die een heel subtiel kleur verloop hebben. Op bijvoorbeeld een iPad echter is dat kleurverloop nauwelijks tot niet waarneembaar wat erg jammer is. Nou dacht ik eraan om op basis van de user device of wat waarschijnlijk in de praktijk zal neerkomen op scherm resolutie een andere background image voor te schotelen die wel goed zichtbaar is op schermpjes met een hoog contrast en/of lagere resoluties.

Mijn vraag is eigenlijk of iemand dit probleem eerder is tegengekomen en of in dit geval daar ook een oplossing voor gevonden heeft.


Thanks.

[NMe]

Domweg betere kleuren kiezen is geen optie? Je gaat hier niet tegenaan kunnen programmeren omdat iedereen zelf zijn monitor kan configureren, ook voor een iPad.

[418O2]

niet zulke kleine kleurverlopen gebruiken, daar schiet je gewoon helemaal niets mee op.

Is het overigens niet zo dat je afbeelding te groot is? De iPad kan niet met grote achtergrondafbeeldingen omgaan is mijn ervaring.

[martennis]

Als je CSS3 gebruikt kun je een max-width opgeven bij je media type (screen dus in dit geval). Misschien dat je daar iets mee kan?

[dominic]

Mocht je toch je CSS willen wisselen, helpt wellicht dit je op weg.

[ Voor 3% gewijzigd door dominic op 21-01-2013 16:51 ]

[Nedra]

Ze hebben een punt! Is het 't echt waard om daar meer code in te steken? Er zijn talloze vormen van 'browser detection' zoals hierboven genoemd, google er maar eens op los, maar zelf ben ik er geen fan van en is het bovendien zelden betrouwbaar.

Je zou eventueel een media query voor bepaalde resoluties er tegenaan kunnen gooien maar zoals eerder genoemd, het is meer symptoonbestrijding dan een echte oplossing

[Verwijderd]

418O2 schreef op maandag 21 januari 2013 @ 16:47:
niet zulke kleine kleurverlopen gebruiken, daar schiet je gewoon helemaal niets mee op.

Is het overigens niet zo dat je afbeelding te groot is? De iPad kan niet met grote achtergrondafbeeldingen omgaan is mijn ervaring.

Nee het is een vrij klein herhalend patroon, en ik liet de site dus zien aan iemand die het normaal op een iPad bekijkt en die viel het meteen op. Het is geen onoverkomelijk probleem en niet erg als het eventueel niet zichtbaar is, maar het zou leuk zijn als het wel zou kunnen.

De brightness op de afbeelding moet gewoon omhoog, maar ja als je het dan op een fatsoenlijk scherm bekijkt valt het weer te veel op. Vandaar dus dat ik zoek naar een oplossing die daar rekening mee houdt.

[Verwijderd]

Nedra schreef op maandag 21 januari 2013 @ 16:51:
Ze hebben een punt! Is het 't echt waard om daar meer code in te steken? Er zijn talloze vormen van 'browser detection' zoals hierboven genoemd, google er maar eens op los, maar zelf ben ik er geen fan van en is het bovendien zelden betrouwbaar.

Je zou eventueel een media query voor bepaalde resoluties er tegenaan kunnen gooien maar zoals eerder genoemd, het is meer symptoonbestrijding dan een echte oplossing

Klopt ik ben wel bekend met Javascript browser detection maar ben daar ook huiverig voor, daarom zocht ik naar een puur op CSS gebaseerde oplossing, misschien is 'n media query inderdaad een idee daar heb ik wel eerder iets vaag van vernomen.

[Verwijderd]

dominic schreef op maandag 21 januari 2013 @ 16:50:
Mocht je toch je CSS willen wisselen, helpt wellicht dit je op weg.

Thanks, nog vrij eenvoudig zo te zien. Denk dat ik hier wel mee verder kan.

[Nedra]

De oplossing van dominic, in ieder geval het css gedeelte, werkt volgens hetzelfde principe als media queries. Let wel dat je niet specifiek iOS of dergelijke hiermee target, maar iets wat zich aanmeld als device met een maximale/minimale schermresolutie.

[RM-rf]

Verwijderd schreef op maandag 21 januari 2013 @ 16:55:
[...]


Nee het is een vrij klein herhalend patroon, en ik liet de site dus zien aan iemand die het normaal op een iPad bekijkt en die viel het meteen op. Het is geen onoverkomelijk probleem en niet erg als het eventueel niet zichtbaar is, maar het zou leuk zijn als het wel zou kunnen.

De brightness op de afbeelding moet gewoon omhoog, maar ja als je het dan op een fatsoenlijk scherm bekijkt valt het weer te veel op. Vandaar dus dat ik zoek naar een oplossing die daar rekening mee houdt.

omdat je zelf letterlijk 'klein patroon' noemt..
is het niet gewoon zo dat het probleem ontstaat door de schaalfunctie die Safari op iOS toepast en mogelijk een site die specifiek voor erg grote schermen ontwikkeld is ..
Als dat zo is zal iOs Safari gelijk uitzoomen (wat je overigens uit kunt zetten via een meta-tag die zowel de initiele size van de viewport als de marges van zoom kan vstzetten)

normaal zal een kleurverschil nooit zo erg uitmaken en al dat kennelijk zo belangrijk is, is dat een designfout die vast ook veel andere schermen zal voorkomen... op hoveel verschillende setups heb je de site eigenlijk al bekeken?

[ Voor 7% gewijzigd door RM-rf op 21-01-2013 17:12 ]

[Verwijderd]

RM-rf schreef op maandag 21 januari 2013 @ 17:11:
[...]


omdat je zelf letterlijk 'klein patroon' noemt..
is het niet gewoon zo dat het probleem ontstaat door de schaalfunctie die Safari op iOS toepast en mogelijk een site die specifiek voor erg grote schermen ontwikkeld is ..
Als dat zo is zal iOs Safari gelijk uitzoomen (wat je overigens uit kunt zetten via een meta-tag die zowel de initiele size van de viewport als de marges van zoom kan vstzetten)

normaal zal een kleurverschil nooit zo erg uitmaken en al dat kennelijk zo belangrijk is, is dat een designfout die vast ook veel andere schermen zal voorkomen... op hoveel verschillende setups heb je de site eigenlijk al bekeken?

Site is 1024 pixels in de breedte precies, dus dat zal het probleem niet moeten zijn. Heb de site bekeken op een aantal laptops en gewone schermen, daarin is ook een verschil maar toch op alle wel zichtbaar. Heb zelf ook een iPad en viel mee op dat 't daar niet zichtbaar was en laatst toevallig ook in een apple store en is gecheckt op zo'n klein macbook pro schermpje (zo'n heel kleintje) en daar was het ook niet zichtbaar.

Het is ook niet zo heel belangrijk, als er echter wat aan te doen is en niet te veel moeite kost dan wil ik dat proberen.

[Verwijderd]

Nedra schreef op maandag 21 januari 2013 @ 17:09:
De oplossing van dominic, in ieder geval het css gedeelte, werkt volgens hetzelfde principe als media queries. Let wel dat je niet specifiek iOS of dergelijke hiermee target, maar iets wat zich aanmeld als device met een maximale/minimale schermresolutie.

Ja dat begrijp ik maar dat is wel goed genoeg denk ik. Toch vrij weinig mensen denk ik nog die een gewone pc of laptop op dergelijk lage resoluties hebben ingesteld.

[NMe]

Psst, die " Je hebt als laatste gereageerd in dit topic. Wil je wat toevoegen, wijzig dan bij voorkeur je laatste bericht." staat er niet voor niks.

Daarnaast is hier nog steeds de juiste oplossing om een kleur/patroon te kiezen dat overal acceptabel uitziet in plaats van op basis van user agents of andere arbitraire criteria andere layouts in te gaan laden. Dan raakt namelijk binnen no time het einde zoek.

[ Voor 36% gewijzigd door NMe op 21-01-2013 17:29 ]

[OkkE]

Verwijderd schreef op maandag 21 januari 2013 @ 16:55:
De brightness op de afbeelding moet gewoon omhoog, maar ja als je het dan op een fatsoenlijk scherm bekijkt valt het weer te veel op. Vandaar dus dat ik zoek naar een oplossing die daar rekening mee houdt.

Dat gaat niet. Je kan niet afvangen welke brightness/contrast instellingen een bezoeker heeft. Ook kun je niet met zekerheid zeggen dat elke telefoon of elke tablet een bepaalde instelling heeft. Om nog maar te zweigen over de enorme verschillen (die er kunnen zijn) tussen bijv. Apple en Microsoft.

Wil je op basis van resolutie andere CSS inladen, kan is "media queries" het magische woord.

[Verwijderd]

OkkE schreef op dinsdag 22 januari 2013 @ 14:17:
[...]

Dat gaat niet. Je kan niet afvangen welke brightness/contrast instellingen een bezoeker heeft. Ook kun je niet met zekerheid zeggen dat elke telefoon of elke tablet een bepaalde instelling heeft. Om nog maar te zweigen over de enorme verschillen (die er kunnen zijn) tussen bijv. Apple en Microsoft.

Wil je op basis van resolutie andere CSS inladen, kan is "media queries" het magische woord.

Dat klopt ja, alleen al de verschillen in font rendering tussen Windows en OSX zijn een wereld van verschil is mij opgevallen (in negatieve zin voor windows). Hoewel je dat geloof ik wel weer zelf kunt instellen maar goed daar is de gebruiker ook weer zelf verantwoordelijk voor.

[Bosmonster]

Verwijderd schreef op maandag 21 januari 2013 @ 17:22:
[...]


Site is 1024 pixels in de breedte precies, dus dat zal het probleem niet moeten zijn.

1024 is te breed. Je moet ook rekening houden met browser chrome en marges. Over het algemeen wordt 960 breedte als standaard gehanteerd tegenwoordig.

Als je schalen wilt voorkomen, kun je beter zorgen voor de juiste viewport settings:

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

En verder, wat al eerder gezegd is, houd rekening met verschillende schermen. Niet elk scherm heeft de kwaliteit van het scherm waar je op werkt en zorg dus voor voldoende contrast in je design. Met name lichte grijstinten worden vaak misbruikt.

[ Voor 18% gewijzigd door Bosmonster op 28-01-2013 09:33 ]

[E.R.Y.]

css media qeuries is een oplossing voor je probleem

http://css-tricks.com/css-media-queries/
http://webdesignerwall.com/tutorials/css3-media-queries