Keskustelu: Nettisivujen teko: Mobiilisivut

Miten tuollaiset mobiilisivut tehdään, siis niin että sisältö skaalautuu aina koko näytölle, tässä hyvä esimerkki: Radiohullujen foorumi. Tuleeko siis html koodiin sinne ylös headiin joku koodinpätkä?

Ei sitä millään one-linerilla voi hoitaa, vaan sivun rakenne eli html-puoli täytyy suunnitella niin, että sivulle saa useita erilaisia järkeviä esitysmuotoja. Loput hoituu kirjoittamalla jokaiselle halutulle näyttökoolle omat css-sääntönsä.

Niinhän ne on suunniteltu, sivuillani on aikas yksinkertainen rakenne. Tälläinen oli tuon radiohullut foorumin lähdekoodissa, kokeilin sivuilleni ja nyt suostui skaalautumaan nätisti :) Nyt vaan tekemään mobiilisivuja

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

Voit määritellä eri kokoisille näytöille oman css-pätkän käyttämällä @media:ta:

#logo {
	width: 100%;
}
@media only screen and (min-width:730px) {
	/* Tänne määrittelyt, jotka toteutuvat, kun näytön leveys on suuurempi kuin 730px */
	#logo {
		width: 200px;
	}
}

Tai sitten käyttää jotain valmista viritelmää, kuten Foundationia tai Bootstrappia.

Itse suosittelisin juuri valmiita viritelmiä.

radioaktiivinen kirjoitti:

Niinhän ne on suunniteltu, sivuillani on aikas yksinkertainen rakenne. Tälläinen oli tuon radiohullut foorumin lähdekoodissa, kokeilin sivuilleni ja nyt suostui skaalautumaan nätisti :) Nyt vaan tekemään mobiilisivuja

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

Niinpä! Jos sivut on tehty tarpeeksi yksinkertaisesti, ne skaalautuvat automaagisesti. Ongelmaksi on muodostunut, että mobiiliselaimet oletusarvoisesti skaalaavat sivun, lähtien siitä, että suurin (?) osa sivuista on suunniteltu luokkaa 800–1600 oleville näytöille, jolloin ne on ”pakko” skaalata, jotta käyttäjä saa sivusta jonkinlaisen yleiskuvan. Tuo meta-tägi on sitten keino, jolla sellainen skaalaus estetään eli selain käyttää laitteen (näyttöalueen) todellista leveyttä.

Toki ongelmia syntyy aika helpostikin. Ehkäpä simppelein tapaus on isohko (leveähkö) kuva, mutta usein voi lähteä siitä, että paras vaihtoehto on silloin skaalata kuva niin leveäksi kuin mahtuu (CSS-asetus max-width: 100%).