[elektro-etc] weblap mobilon
Kis János
kisja72 at gmail.com
Sun Jan 8 13:44:43 CET 2012
Szia!
gyapo <gyapo at freemail.hu> írta (2012. január 8. 12:05):
> Volt a weblapos szál az elektrón, de inkább ide való.
> Naszóval hogy is lehet azt megcsinálni, hogy mobilon nézve egy weblapot ne
> kelljen görgetni? Mondjuk 1000 pixel széles a weblap. Az én tabletem 1024
> pixel széles, szóval ott nem kell, de gondolom egy okostelefonnak kisebb a
> képernyője. Ha lekicsinyíti, esélye nincs elolvasni. Ha úgy kicsinyíti le,
> hogy a betűk maradnak nagyobbak/olvashatók, akkor is szétesik az egész, és
> lehet olvasni függőlegesen.
> Milyen módszer van még, és hogyan kell azt programozni?
>
> Üdv.: gyapo
>
A media szó a te barátod...
A W3C ajánlása:
HTML-ben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Link to a target medium</TITLE>
<LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css">
</HEAD>
<BODY>
<P>The body...
</BODY>
</HTML>
VAGY
<link media="Screen" href="styles.css" type="text/css" rel="stylesheet" />
<link media="handheld, only screen and (max-width: 480px), only screen
and (max-device-width: 480px)" href="mobile.css" type="text/css"
rel="stylesheet" />
<
Ha normál böngészőn nézed, akkor a style.css-t tölti be, ha mobil
eszközön (handheld) akkor pedig a mobile.css-t
VAGY
Ha egyetlen css lapot használsz, akkor azon belül a
@media handheld, only screen and (max-width: 480px), only screen and
(max-device-width: 480px)
{
}
blokkot használod, amelyen belül meg tudod adni a csak a
mobileszközökre vonatkozó stílusbeállításokat, pl szöveg tördelése
komplett blokkok eltüntetése.
Bővebben:
http://www.seabreezecomputers.com/tips/mobile-css.htm
http://www.w3.org/TR/CSS21/media.html#at-media-rule
http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
http://davidbcalhoun.com/2010/viewport-metatag
http://nagygusztav.hu/jegyzeteim
Üdv.:KisJani
More information about the Elektro-etc
mailing list