Avatar billede mbs- Nybegynder
17. maj 2012 - 19:37 Der er 24 kommentarer og
1 løsning

Vælge en anden font-type eller font-size til mac brugere

Hej.

Jeg har lidt af et tricky spørgsmål som jeg håber der er en der kan hjælpe med.

Har et problem på min hjemmeside der gør at det ser lidt skørt ud i mac. Jeg er næsten sikker på det er font-size eller font-type der driller lidt. Det ser fint ud i Windows 7 (firefox og chrome) men i mac (chrome og safari) er teksten alt for stor, og det ser kikset ud.

Læste et sted at der var problemer med "padding" - men har ikke rigtig brugt padding, hvertfald ikke i de "divs" det gør sig gældende i.

Det ville være nemt med et script der kan opfange om det er windows eller mac, også ha en anden skrifttype.

Nogle der ved om det er muligt?
Avatar billede olsensweb.dk Ekspert
17. maj 2012 - 19:59 #1
har du ikke et serversidesprog tilrådighed ??
ved js skal du jo først have hele filen ned med masser overhead, og sorterer derefter, hvis du dedecterer det serverside kan du sende det rgtige fra starten
php har feks $_SERVER['HTTP_USER_AGENT']
http://php.net/manual/en/reserved.variables.server.php
http://php.about.com/od/learnphp/p/http_user_agent.htm
hvor man kan læse browser og os
Avatar billede mbs- Nybegynder
17. maj 2012 - 20:13 #2
Det er jeg ikke bekendt med, nej.
Troede egentlig det var noget javascript der let ku ordne det - er ikke så skarp til php. 
Har dog læst lidt på de links, men kun et par minutter

"By having this information the user can be directed to a version of your site best suited to their browser."

Det forstår jeg jo således at man omdirigere (f.eks css filerne), og den selv får information via browser. Er det korrekt?
Avatar billede keysersoze Guru
17. maj 2012 - 20:28 #3
Prøv at kom med et link i stedet - så er der knap så stor risiko for at vi guider dig den forkerte vej.
Avatar billede olsensweb.dk Ekspert
17. maj 2012 - 20:34 #4
js har en navigator.userAgent
http://www.quirksmode.org/js/detect.html
http://www.javascriptkit.com/javatutors/navigator.shtml
http://www.javascripter.net/faq/operatin.htm

men som keysersoze skriver et link, det kunne værer andre løsninger
Avatar billede mbs- Nybegynder
18. maj 2012 - 00:47 #5
Hej igen. Var lige lidt væk fra computeren

http://mbstech/test er en "skitse" over siden, om i vil.

Man kan se det hele er rykket længere ned i forhold til Windows - http://peecee.dk/upload/view/367043
Mac: Chrome, det samme i Safari

Her er det i Windows XP - Chrome http://peecee.dk/upload/view/367044

I forhold til Firefox/Chrome i Windows, er siden rykket 1px - Har prøvet lidt frem og tilbage med "line-height" og "padding" jeg synes bare ikke det hjælper noget.

Mvh.
Avatar billede Slettet bruger
18. maj 2012 - 22:51 #6
Har du et eksempel der kan prøves af på en windows og mac browser?

Udover de ikke nødvendigvis har de samme skrifttyper, så har de også forskellige måder at regne størrelsen på selvom det er samme skrifttype (det kan drille med font-size og line-height afhængig af hvad du bruger som enheder - 72 dpi (mac) vs 96 dpi (windows)).
Avatar billede mbs- Nybegynder
18. maj 2012 - 23:46 #7
Ja?

Som sagt ligger det hele på http://mbstech.dk/test
Her er et billede af MAC http://peecee.dk/upload/view/367043
Her er et billed af Win http://peecee.dk/upload/view/367044

Jeg er klar over det kan drille, og at det muligvis er line-height eller font-size.

Hvad er løsningen så når der er så meget forskel (24 dpi)?
Avatar billede mbs- Nybegynder
19. maj 2012 - 12:52 #8
Der er et link her http://www.rfwilmut.clara.net/about/fonts.html hvor jeg har printet alle 3 sider ud. Dem er jeg i gang med at læse, og prøve mig lidt frem. Synes bare ikke det har nogen effekt :(
Avatar billede keysersoze Guru
19. maj 2012 - 16:07 #9
Jeg tror det er en meget gammel artikel du har fundet frem - de skriver om IE5 og vi kører altså 9 nu, så selvom idéen med javascripten stadig kan fungere skal du rigtig meget igennem for at ramme alle muligheder.

Jeg tror at du får meget svært ved at ramme 100% ens i alle browsere og på alle klienter (det har vist heller aldrig været meningen med standarderne selvom det er hvad mange forventer). IE9 renderer fx teksten noget anderledes end tidligere versioner og klienten kan også have indstillinger (eller selvfølgelig manglende fonte), som gør det svært eller umuligt at ramme. Mit umiddelbare råd vil derfor være at du må "nøjes" og altså komme tilnærmelsesvis noget ens, fx ved at benytte flere lag med begrænsede størrelser og absolutte positioner i forhold til den enkelte post.
Avatar billede Slettet bruger
19. maj 2012 - 16:11 #10
På mac i firefox, ligner det slet ikke det billede du postede af Mac. Den ligner faktisk det du postede af Win. I chrome er der en smule forskel, men ligner stadig mest billedet af Win. Jeg kan se du mangler at definere line-height nogle steder, så firefox og safari bruger lidt forskellige line-heights. F.eks. kan du prøve at sætte line-height til 31px på din "h5".
Avatar billede mbs- Nybegynder
20. maj 2012 - 11:30 #11
keysersoze - Det tror jeg egentlig også, efter jeg har set det hele igennem. Jeg har bare svært ved at leve med det, da det ser endnu værre ud på den "rigtige" hjemmesiden. Linket jeg er kommet med, er kun en skitse. Jeg gad godt man evt. kunne give mac brugerne et andet style sheet. Så havde jeg det og lege med, indtil jeg havde den. Fordi jeg kan ikke få det ramt således at det passer, bare sådan nogenlunde.

tolamaps gider du og tage et screenshot af det? Sidder desværre ikke bag Mac lige nu.

Prøver mig frem med line-height
Avatar billede mbs- Nybegynder
20. maj 2012 - 11:49 #12
Problemet er også at jeg har mange forskellige "p classes" og også mange "br" det giver problemer ved det ark papir når man enten viser siden i Firefox/Chrome.

Det kan være at siden ser fint ud i Chrome, men så åbner man i Firefox, og det er rykket 1 eller 2 px. Der må da være en funktion hvor man kan angive en anden css fil, når der kommer f.eks kommer en Firefox bruger på en mac, eller en Firefox bruger på pc.

Har f.eks lavet en redirect til en anden side, når der kommer IE. Fordi i IE ser det også sjovt ud (på den "rigtige" side)
Avatar billede mbs- Nybegynder
20. maj 2012 - 16:08 #13
Synes ikke det havde nogen effekt. Men med en times søgen på nettet, fandt jeg faktisk dette:
http://bastianallgeier.com/css_browser_selector/
http://rafael.adm.br/css_browser_selector/

Er der to gode links som jeg tror kan rette op på mit problem. Jeg er igang med at læse alt dette. Ligner det ikke en metode til at få en anden style sheet på de forskellige browsere?

"CSS Browser Selector is a very small php function which empower CSS selectors.
It gives you the ability to write specific CSS code for each operating system and each browser."

Jeg vil prøve php delen og vende tilbage her til tråden.
Avatar billede mbs- Nybegynder
20. maj 2012 - 16:19 #14
Wow! Det virker dælme :-)

http://bastianallgeier.com/css_browser_selector/

Rigtig nemt at sætte op, og det virker bare. Nu kan jeg faktisk få ordnet det problem jeg også havde med Internet Explorer. Jeg valgte jo at redirecte til en anden side, og det er jo lidt irreterende. Nu kan jeg style på 4 forskellige browsere. Fedt!

ronols - Jeg tror det er dig der skal ha point, da jeg faktisk brugte hjælp fra dig ($_SERVER['HTTP_USER_AGENT']).
Avatar billede mbs- Nybegynder
20. maj 2012 - 17:32 #15
Øv! :( Det virker fint nok, men line-height driller godt nok!

Problemet er at "line-height" i Chrome ikke reagere fra 206%
til f.eks 210% Det giver en smule forskel på papiret når jeg
tilføjer tekst.

Er der "line-height" alternativer?
Synes der er MEGET forskel fra Chrome også til Firefox

Det ikke noget problem at definere de forskelle parameter, slet ikke med det her script. Men det har ingen effekt hvis ikke "line-height" virker :S

Det er selvfølgelig den i Firefox jeg gerne vil ha

Her er det i Windows XP - Chrome  http://peecee.dk/upload/view/367404
Her er det i Windows XP - Firefox http://peecee.dk/upload/view/367403

Firefox er line-height sat til 202%
Chrome er line-height sat til 206% og med det samme jeg går op på f.eks 207% rykker det sig for meget. Kan slet ikke få ramt det således at teksten rammer linjen.

Og ja, siden ligger stadigvæk på http://mbstech.dk/test
Avatar billede Slettet bruger
20. maj 2012 - 19:43 #16
Jeg tror det skyldes at chrome afrunder line-height til et helt antal pixels (det kan jeg se når jeg bruger "inspect element"), hvilket den ikke gør i firefox.

Så løsningen må være at ændre baggrundsbilledet, så linierne kommer til at passe med et helt antal pixels.
Avatar billede mbs- Nybegynder
20. maj 2012 - 20:29 #17
Okay. Det kan selvfølgelig forklare lidt. Det er bare underligt at det samme sker hvis jeg bruger px (i forhold til procent)

Der er jo ikke andet at gøre end at prøve sig frem. Det lader dog godt nok til at det tager tid! :(
Avatar billede mbs- Nybegynder
21. maj 2012 - 08:24 #18
Var der en der smed et svar så jeg kan få lukket denne tråd.

ronols - smid et svar ;)
Avatar billede olsensweb.dk Ekspert
21. maj 2012 - 10:10 #19
du får et svar her, men tolamaps bør også ligge et svar

@tolamaps smid et svar også
Avatar billede mbs- Nybegynder
21. maj 2012 - 15:37 #20
Hvordan kan man give point til jer begge to?
Avatar billede olsensweb.dk Ekspert
21. maj 2012 - 16:52 #21
når tolamaps har lagt et svar følger du nedenstående faq

ref http://www.eksperten.dk/faq#faq-3-2
Der er mere end en der har svaret, hvad gør jeg så?
Alle svar har været gode og hjulpet dig, så markerer du blot de relevante svar, og trykker på accepter i den boks som kommer frem. Så bliver point delt ligeligt imellem svarerne.
Du kan også fordele points mellem svarene ud fra hvor meget de har hjulpet dig på vej.
Avatar billede Slettet bruger
21. maj 2012 - 18:01 #22
Ellers tak, jeg skal ikke have noget. :)
Avatar billede mbs- Nybegynder
21. maj 2012 - 18:51 #23
Okay :) Men jeg siger mange tak for hjælpen. God sommer
Avatar billede Slettet bruger
22. maj 2012 - 21:51 #24
Tak ilm. Husk at give point til ronols. :)
Avatar billede Slettet bruger
22. maj 2012 - 21:54 #25
Sorry, så ikke der var givet point allerede. Min fejl. :]
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester