A18. Hur skapar man webbsidor för widescreenskärmar?

1. Inledning

Den här sidan handlar om något som egentligen inte är särskilt problematiskt, men som ändå väckt många frågor. Här skall jag försöka reda ut begreppen.

Sidan har skrivits om och förtydligats några gånger, senast i augusti 2006.

2. Vad är widescreen?

Widescreenskärmar är en typ av skärm som har annorlunda proportioner än vanliga skärmar. En vanlig skärm har ungefär storleksförhållandet 4:3 för bredd och höjd. Vanliga storlekar är 640x480, 1024x768, 1280x1024, osv.

Vanliga skärmar kan simulera ett widescreenläge, där en svart kant visas över och under bilden. På så vis kan man titta på film på datorn.

Men i takt med att många börjar använda datorn för att titta på film, har många datorer utrustats med en bredare skärm, en s.k widescreenskärm. På svenska säger man ibland "bredbild" eller "bredskärm".

Hos dessa är förhållandet mellan bredd och höjd ungefär 16:9. (Vissa bärbara datorer kan ibland ha förhållandet 16:10.) Det finns flera olika upplösningar: för sådana skärmar: 1280×800, 1152x720, 1440x900, osv.

Bilden visar förhållandet mellan skärmtyperna:

Vanlig skärm	Widescreen

3. Varför webbsidor och widescreen inte är något problem

Webbsidor på widescreenskärmar är egentligen inte något problem, eftersom webbsidor är skalbara. Detta skiljer dem från (pixelbaserade) bilder, som har ett absolut bredd-höjdförhållande.

Drar man i ena kanten av en bild så kommer den att förvridas genom att antingen bli utdragen på längden eller på tvären. Men webbsidor blir det inte eftersom de anpassar sig till det rådande utrymmet.

Detta betyder att man inte behöver använda någon särskild kod för att visa webbsidor på widescreenskärmar, eftersom de anpassar sig.

Även bilder brukar visas korrekt eftersom de olika programmen i datorn växlar mellan olika visningslägen, där pixlarna anpassas för att se "normala" ut.

4. Om problem uppstår ändå?

Då och då hör folk av sig till mig och berättar att deras skärm ser underlig ut. Bilderna är utsträckta eller ihoptryckta eller så syns skärmbilden med svarta kanter överst och underst, som när man tittar på film.

Efter att ha pratat med några experter har jag kommit fram till följande saker som kan ha skett:

A. Konflikt mellan olika program

När man tittar på film i datorn använder man en spelare, som sköter om visningen och väljer rätt format, upplösning och proportioner. Spelaren sköter detta automatiskt, men kommer ibland i konflikt med andra program och inställningar i datorn.

I synnerhet kan detta inträffa om man använder flera skärmar till samma dator. Som skärm menas här t.ex en projektor, som är vanligt för att visa film på en duk.

Det som då kan inträffa är att då man växlar mellan spelaren och datorns övriga program visas filmen eller datorns övriga program i fel läge, t.ex 16:9 i stället för 4:3. Anledningen är att spelaren bestämmer pixelstorleken och hamnar inställningarna i konflikt med andra program kan det som visas alltså se underligt ut.

Detta brukar gå över då man avslutar spelaren eller startar om datorn.

B. Konflikt mellan skärmen och grafikkortet

Grafikkortet påverkar inte särskilt mycket av hur saker och ting visas på skärmen (det sköter de olika programmen om). Men om man mixtrar med inställningarna kan man av misstag komma åt sådana som gör att skärmbilden ser förvriden ut.

Så var fallet med dem som först skrev till mig och rapporterade om att webbsidorna såg konstiga ut på bildskärmen. Vid en noggrannare kontroll visade det sig att de skapat en konflikt mellan grafikkortet och bildskärmen, som gjorde att skärmbilden blev förvrängd.

Detta handlade dock inte om att webbsidorna inte fungerade. Problemet försvann sedan korrekta inställningar av grafikkortet gjorts.

Om bilden på skärmen alltså ser underlig ut bör man läsa manualen till datorn och skärmen för att hitta rätt inställningar.

5. Mer om webbsidor och widescreen

Det finns ändå ett litet problem för dem med widescreenskärmar och det är alla sidor som inte är begränsade i breddled. Det gör att man hamnar på sidor som blir väldigt breda, eftersom fönstren i Windows gärna vill fylla ut hela skärmens bredd.

För den som skapar enkla hemsidor
Det som skapar problem är då webbsidans bredd inte är begränsad. Genom att använda frames eller tabeller kan man ange ett absolut värde och låta resten av sidan fyllas ut med tom yta. Du kan läsa mer om kodningen på mina sidor om Html. Gå dit »

Stilmallar för olika mediatyper
Det går också att använda en stilmall för varje skärmupplösning. Du kan läsa mer om hur man använder stilmallar på en särskild sida. mina försök har dock lett till frustration då det inte alltid fungerar. Läs mer om stilmallar för olika mediatyper här »

Med JavaScript
Detta är mer avancerade försök. Det mest intressanta jag sett är kanske Mike Madaios "Preparing for Widescreen" (») som han publicerade 27 mars 2006. Där använder han både stilmallar och JavaScript och det verkar faktiskt fungera.

Fördelen med ett script är naturligtvis att man på det sättet kan anpassa sidan automatiskt för besökaren medan sidan laddas. Scriptet kontrollerar skärmens upplösning och anpassar sidan efter den.