Nettisivujen automaattinen skaalaus?

6474

Teen tällaista pientä projektia jossa iso resoluutio on ideaalisin sivuston kannalta, mutta nyt mietin että mites ne joilla ei ole isoresoluutioista näyttöä. Sivuston käyttö ei varmaankaan ole mukavaa.

Miten saisin tehtyä sellaisen skriptin tms. että sisältöä skaalattaisiin sopivankokoiseksi, samaan tyyliin kuin esim. Firefoxissa jos painan CTRL-napin pohjaan ja rullaan hiirellä? Toki voisin laittaa sivustolle ilmoituksen että tehkää näin mutta onhan se vähän tökeröä.

5

576

    Vastaukset

    Anonyymi (Kirjaudu / Rekisteröidy)
    5000
    • fffffsdsfd
      • 3++3+3

        Onko helpompaa tapaa? jos laitan img -tagin viereen vaan width=960 niin sehän skaalautuu mutta jättää pois osan, image map toimii kuitenkin edelleen oikein, olisko jotain attribuuttia jolla vois kertoa ettei jättää kuvasta osaa pois vaan skaalata?


      • ffffsdfsdf
        3++3+3 kirjoitti:

        Onko helpompaa tapaa? jos laitan img -tagin viereen vaan width=960 niin sehän skaalautuu mutta jättää pois osan, image map toimii kuitenkin edelleen oikein, olisko jotain attribuuttia jolla vois kertoa ettei jättää kuvasta osaa pois vaan skaalata?

        Älä käytä vanhoja html:n attribuuteja muotoiluun. Tee sivujen rakenne html käyttäen ja ulkoasu css käyttäen.

        Ei tuo sinällään ole "vaikea" tapa mitä esitin. Se lähinnä perustuu käytetäänkö sivuilla absoluuttisia vai suhteellisia mittayksiköitä määrittämään rakenne.

        Kuvien skaalauksessa on se huono puoli että tarkkuus kärsii. Toki sekin onnistuu käyttämällä prosenttikokoja. Kannattaa kuitenkin lähteä ensin siitä sivujen yleisestä rakenteesta ja kuinka haluat sivujen toimivan. Et välttämättä sitten haluakaan enää skaalata kuvia kun sivut ovat muuten toimivat.

        Riippuen kuvien tarkoituksesta jne voi olla järkevää näyttää sivuilla pienempi kuva ja josta klikkaamalla kuva sitten avautuu täysikokoisena uuteen ikkunaan tai sivun päälle "popuppina".

        En osaa sanoa mistä tuo kuvan leikautuminen sinun tapauksessasi johtuu - ainakaan näkemättä koodia. Oletuksena näin ei pitäisi tapahtua vaan kuvan pitäisi "valua yli, elementistä jonka sisällä kuva on. Tuota käyttäytymistä voi kontrolloida css määreellä overflow, joka laitetaan sille sisältöelementille minkä sisällä tuo kuva on (esim. div). Mahdollisia overflow arvoja:
        * visible: sisältö ei leikkaudu vaan se valuu yli
        * hidden: sisältö leikkautuu
        * scroll: sisältö leikataan tarvittaessa ja näytetään vierityspalkit
        * auto: tarvittaessa sisältö leikataan ja näytetään vierityspalkit (selaimissa taitaa olla eroja näytetäänkö vierityspalkjit aina?)
        * inherit: ominaisuus peritään ylemmältä tasolta

        Jos css ei ole tuttu niin kannattaa vähintään käydä tutoriaali ajatuksella läpi:
        http://www.w3schools.com/css/default.asp


    • Tyylitiedostoilla teet kelluvia elementtejä, jotain juttuja voi skaalata prosentteina ja jne.

      Siitä voisi lähteä, että sivustossa kriittisen sisällön pitäisi näkyä 800x600 näytöllä oletusfontilla, että leipätekstin fonttia ei ole muutettu. Sitten toimii kaikkialla, pienillä näytöillä kun pienentää ja suurilla voi suurentaa jos siltä tuntuu. Kuvat voisi tallentaa vaikka 1.5x tarkkuudella tai SVG:nä mitä tuossa näkyisi jos jotain skaalataan vaikka prosentteina tai käyttäjä klikkaa suuremmaksi niin ei mene röpöksi.

      Tarkempaan/suurempaan on turha pyrkiä laitteiden kirjavuuden ja kaistasyistä. Mainossivustoilla tosin pitää mainokset saada sopimaan, että silloin 1024x768 korkeintaan, jossa mainospalsta on oikealla ja leikkautuu pois kuvasta jos on pieni näyttö.

      • Korjaan, mainossivuston pitäisi olla vähintään 1024x768 näytöllä. Ainahan se voi skaalautua siitä sitten isommaksi ja pienemmillä tarkkuuksilla jää mainoksia pois.


    Ketjusta on poistettu 0 sääntöjenvastaista viestiä.

    Luetuimmat keskustelut

    1. Aivosyöpää sairastava Olga Temonen TV:ssä - Viimeinen Perjantai-keskusteluohjelma ulos

      Näyttelijä-yrittäjä Olga Temonen sairastaa neljännen asteen glioomaa eli aivosyöpää, jota ei ole mahdollista leikata. Hä
      Maailman menoa
      80
      2799
    2. Pelotelkaa niin paljon kuin sielu sietää.

      Mutta ei mene perille asti. Miksi Venäjä hyökkäisi Suomeen? No, tottahan se tietenkin on jos Suomi joka ei ole edes soda
      Maailman menoa
      293
      1610
    3. Mikä saa ihmisen tekemään tällaista?

      Onko se huomatuksi tulemisen tarve tosiaan niin iso tarve, että nuoruuttaan ja tietämättömyyttään pilataan loppuelämä?
      Sinkut
      246
      1517
    4. Minkä merkkisellä

      Autolla kaivattusi ajaa? Mies jota kaipaan ajaa Mersulla.
      Ikävä
      87
      1361
    5. IL - VARUSMIEHIÄ lähetetään jatkossa NATO-tehtäviin ulkomaille!

      Suomen puolustuksen uudet linjaukset: Varusmiehiä suunnitellaan Nato-tehtäviin Puolustusministeri Antti Häkkänen esittel
      Maailman menoa
      401
      1339
    6. Nyt kun Pride on ohi 3.0

      Edelliset kaksi ketjua tuli täyteen. Pidetään siis edelleen tämä asia esillä. Raamattu opettaa johdonmukaisesti, että
      Luterilaisuus
      396
      1273
    7. Esko Eerikäinen tatuoi kasvoihinsa rakkaan nimen - Kärkäs kommentti "Ritvasta" lävähti somessa

      Ohhoh! Esko Eerikäinen on ottanut uuden tatuoinnin. Kyseessä ei ole mikä tahansa kuva minne tahansa, vaan Eerikäisen tat
      Suomalaiset julkkikset
      38
      1017
    8. Kiitos nainen

      Kuitenkin. Olet sitten ajanmerkkinä. Tuskin enää sinua näen ja huomasitko, että olit siinä viimeisen kerran samassa paik
      Tunteet
      2
      979
    9. Hyväksytkö sinä sen että päättäjämme ei rakenna rauhaa Venäjän kanssa?

      Vielä kun sota ehkäpä voitaisiin välttää rauhanponnisteluilla niin millä verukkeella voidaan sanoa että on hyvä asia kun
      Maailman menoa
      329
      854
    10. Miksi Purra-graffiti ei nyt olekkaan naisvihaa?

      "Pohtikaapa reaktiota, jos vastaava graffiti olisi tehty Sanna Marinista", kysyy Tere Sammallahti. Helsingin Suvilahden
      Maailman menoa
      254
      832
    Aihe