Att få en hemsida att passa olika upplösningar

Permalänk
Medlem

Att få en hemsida att passa olika upplösningar

Jag har ett litet problem

Jag har byggt en hemsida så den passar en vanlig laptop med ~16'' som är 1366x768
Och nu så ser den ju extremt liten ut på en exempel en 24'' med 1920x1200.

Trycker man på ctrl+ / Ctrl- i Firefox eller IE så kan man få att sidan ser bra ut i dessa upplösningar.

Vad ska jag göra?

Ska jag skriva om hela sidan i % sats eller finns det något javascript som känner av hur mycket den behöver zooma hela sidan?

Hittils har jag bara hittat hur man zoomar texter och bilder.. men jag behöver funktionen som ctrl+ har.
jag vill ju inte att mina besökare ska behöva trycka på ctrl+ själva om dom har stor skärm.

Och om man skriver en hemsida i % istället för fasta pixlar hur ska man skriva font storlekar då?

har jag 12px font så är den ju fortfarande 12px i 1920x1200 som i 1366x768.

//tack

Visa signatur

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Permalänk
Medlem

Fontstorlekar ska du alltid skriva i em.

Permalänk
Medlem
Skrivet av downup:

Jag har byggt en hemsida så den passar en vanlig laptop med ~16'' som är 1366x768
Och nu så ser den ju extremt liten ut på en exempel en 24'' med 1920x1200.

Det är väl bara folk med synfel och nybörjare som kör med en maximerad browser på en 24-tummare?

Du kan testa din sida här för att se hur den passar in olika fönsterstorlekar. T.ex. har 98% av användarna ett browserfönster som är 750 pixlar eller mindre.

Visa signatur

Bra, snabbt, billigt; välj två.

Ljud
PC → ODAC/O2 → Sennheiser HD650/Ultrasone PRO 900/...
PC → S.M.S.L SA300 → Bowers & Wilkins 607

Permalänk
Medlem
Skrivet av Phod:

Det är väl bara folk med synfel och nybörjare som kör med en maximerad browser på en 24-tummare?

Du kan testa din sida här för att se hur den passar in olika fönsterstorlekar. T.ex. har 98% av användarna ett browserfönster som är 750 pixlar eller mindre.

Haha. hur kan det stämma? när jag va i usa satt alla som jag träffade. ja ALLA.
med minst 1024x768 och i sverige kan jag inte tänka mig att det finns ens 5% som kör 800x600.

Sen om man inte kör full-size så förstår jag hur det kan bli så. men då är det väl ändå användarens fel?

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Permalänk
Medlem
Skrivet av zillio:

Sen om man inte kör full-size så förstår jag hur det kan bli så. men då är det väl ändå användarens fel?

WTF, nej. En bra sida anpassar sig och går att använda även om besökaren inte kör sin webbläsare i fullscreen. Personligen kör jag aldrig Safari maximerat, eftersom jag gärna vill komma åt saker på skrivbordet, kunna se bitar av andra fönster under webbläsaren, osv.

Att förutsätta att alla kör sina webbläsare maximerade och stämpla de som inte gör det men någon sorts fel-stämpel är fullständigt idiotiskt. Du vill locka besökare, alltså ska din sida fungera och anpassa sig enligt besökarens behov.

(Små skärmar och upplösningar börjar dessutom bli mycket vanligare nu när netbook-trenden kommit igång också)

Permalänk
Medlem
Citat:

WTF, nej. En bra sida anpassar sig och går att använda även om besökaren int...

En bra sida anpassar sig efter användaren det är vi överens om. Men hur mycket ska jag anpassa mig är frågan.
Ska jag anpassa mig så mycket att 99% av alla ska kunna läsa?
Woooops säger jag då. då vart det genast en sida med mycket länkar och jobbig meny.

Du nämner också "SMÅ SKÄRMAR" men du. ska jag börja anpassa mig efter skärm storlek eller kanske
pixlar? Jo pixlar såklart. och så vitt jag vet så är snittat netbook 1024width. om inte så 800.
Och font kör jag såklart i em.

Och 800 är det minsta jag kör på en sida. Och kommer aldrig dra mig lägre än det om det självklart inte är en lite lättare informations sida. Men kolla på alla bloggar, portaler, community's, forum. Dom flesta kör på minst 800.
Men jag vet inte man kanske ska hålla sig till 300 width för att mobilerna också ska kunna kolla?

Sen om du väljer att köra mindre än 800 så anser jag att det är upp till dig. kan inte anpassa en sida 100% för då ska man välja börja räkna med alla nya telefoner också.

EDIT: Menar då att dom passar 800width. så det blir väl runt 780px width layout.

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Permalänk
Medlem

Du kan ju köra 90% istället för 800..

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem
Citat:

Du kan ju köra 90% istället för 800..

Ja visst går det att göra så och något jag också skulle gjort.
Men jag pratar mer om vad man minst kan ha för upplösning

Så %-sats är grymt som fan men hur blir det med den super snygga headern+sponsorn bredvid på din gamingsite om du är låst till att vara en 100% användarvänlig sida.

Sweclockers verkar inte vara under 800pix width.
sen kan det vara dynamiskt på det sättet att den ser vilken upplösning jag har på datorn
men då pratar vi direkt php,asp, asp.net och då behövs i dom flesta fallen nån man måste betala.

Jag skulle göra som du säger men också min-width

Width: 90%; min-width: 780px;

På det sättet vet jag att min sida fungerar till 100% och inte krånglar på det som har mindre upplösning.
De får scrolla åt sidan istället för att se en tight sida.

det ser verkligen ut som att jag har envisat mig vid 800px. Men grejen är bara att det är
den upplösning jag tycker man ska bry sig om eftersom antagligen dom flesta har den upplösning (minst)
om inte så är det dags att förstora fönstret eller köpa ny skärm.

Så tycker jag och jag tror inte jag förlorar många besökare på att sätta en min-width på 780px.
Blir också svårare grafiskt om man ska ha lägre upplösning

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Permalänk
Medlem

Det finns ingen standardiserad metod för att låta en server side-applikation se vad en användare kör för upplösning. Man kan använda ett JavaScript på klientsidan för att få denna information, men det är sällan en bra idé. Då är det ofta lämpligare att omdirigera mobiltelefoner till en sida specialskriven för enheter med mindre skärmar, som på swedroid.se eller en.wikipedia.org.

En kul grej du kan testa är att använda ems istället för pixlar till min-width. Detta leder till att sidan går att "zooma" även i äldre webbläsare genom att ändra förvald fontstorlek. På sidor som inte innehåller speciellt mycket grafiska element (som är krångligare att definiera med em) fungerar det ofta riktigt bra.

Visa signatur

Kom-pa-TI-bilitet

Permalänk
Medlem

Finns ingen standardiserad metod. Finns inte heller en standard på upplösning, finns inte heller standard i hur en kod ska se ut..

Jag sa inte att det va standard utan att det GÅR att bygga en sån.. läs--> på serverside.
Den kollar vad du har för upplösning. den väljer att skicka iväg en annan .css fil till dig och vips så har du en som är anpassad.

För övrigt så tänker jag inte diskutera mer. Tycker det är konstigt att ni inte förstår grejen.
Jag är inte heller ensam om att tycka som jag gör.

här har ni länkar att kolla på..Kolla extra noga in på w3schools.com (varför har den inte under 800px?)
W3Schools Online Web Tutorials
Välkommen till Facebook
ImageShack® - Online Media Hosting
http://www.sweclockers.com/
SK Gaming - Esports, Professional Gaming, Counter-Strike, Warcraft III, World of Warcraft, FIFA, DotA, Starcraft, Quake, Console

Ja det där borde väl räcka för att förstå att folk längre inte anpassar sig för lägre upplösning än 800x600.
Dom där som jag länkade verkar inte vara anpassade för de ens.

Nu har jag sagt mitt och om inte ni förstår vad jag menar så vet jag inte vad ni ska göra.

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Permalänk
Medlem
Skrivet av zillio:

Ja det där borde väl räcka för att förstå att folk längre inte anpassar sig för lägre upplösning än 800x600.
Dom där som jag länkade verkar inte vara anpassade för de ens.

Att 960px råkar vara normen på många ställen betyder inte att majoriteten av alla besökare kör det. Det är inte heller svårt att lägga upp sin CSS så att den anpassar sig efter besökarens fönster, speciellt inte men moderna CSS-tekniker som media queries, som introducerades i CSS3 och ger fantastiska möjligheter gällande just det här problemet. Det är hur enkelt som helst att använda, och därför finns det heller ingen anledning att stänga ute (eller inte bry sig om) besökare med lite mindre fönster/skärmar — det är bara lathet och okunskap.

Permalänk
Medlem
Skrivet av zillio:

Jag sa inte att det va standard utan att det GÅR att bygga en sån.. läs--> på serverside.

Varför så hetsig?

Nej det går inte. Servern har ingen aning om vilken upplösning du kör, det måste till ett javascript för att ge servern den informationen och som jag skrev förut så är det sällan en bra idé. För övrigt anpassar sig facebook iaf. till min smartphone när jag surfar in där.

Visa signatur

Kom-pa-TI-bilitet