Mobil 800 teszt oldal

Témakörök
 
index_oldal


Ezen oldalt mobilon tesztelve meggyőződhetünk, 800px tartlmi szélességnél, egy sorban sortörés nélkül, megjeleníthető stringek számáról.
Mobilon karakterek méreteit, pre és table elemek kivételével, a böngésző határozza meg.




Mobil 800 teszt szövegsorok.



<h1> elem teszt

Mobil weboldalra karakter tesztek


<h2> elem teszt

Weboldal 800-px szélesség tesztelés.


<h3> elem teszt

Weboldal 800-px szélesség tesztelésein.


<p> elem teszt

<p>
Karakterek méretei, böngészőtől függnek.
</p>

<p><strong>
Karakterek méretei, böngészőtől függnek.
</strong></p>


<pre> elem teszt

width:800px esetén, egy sorba írható stringek száma 99, mobilon és asztalin megegyezik, de mobilon nagyítás nélkül olvashatatlan.

<pre>
Mobilon olvashatósági szempontból
a pre elem karaktereinek méretét,
állítsuk be minimum ilyen méretre:
font-size:29pt;
Asztalinál is maradhat a 29pt
érték, így ott is egy sorba 33
strig, írható be.
</pre>



<li> elem teszt

Mobilon 39 string
Asztalin 114 string




<blockquote> elem teszt

Mobilon 39 string
Asztalin 109 string

A blockquote elem, karaktereinek x x x megjelenése.



<acronym> elem teszt

Mobilon 43 string
Asztalin 121 string

Az acronym elem, karaktereinek x x x x x x megjelenése.


<address> elem teszt

Mobilon 45 string
Asztalin 108 string

Az address elem, karaktereinek x x x x x x x megjelenése.



<table> teszt

Mobilon table elem karakterei olvashatatlanok, ha nem határozunk meg, font-size méretet.

table{width: 98.5%; border:1px solid black;}
caption{font-size:31pt;}
th{font-size:31pt; border:1px solid black;}
td{font-size:30pt; border:1px solid black;}


Egy oszlopos <table> teszt

Egy oszlopos táblázat x x x x x x x x x x x x
Oszlop elnevezése x x x x x x x x x x x x x
Adattároló cella x x x x x x x x x x x x x x x x


Kettő oszlopos <table> teszt

Kettő oszlopos táblázat x x x x x x x x x x x
1 Oszlop x x x x x x x elnevezése2 Oszlop x x x x x x x elnevezése
Adattároló x x x x x x cella.Adattároló x x x x x x cella.


Táblázatnál, a fenti stílusok meghatározásával, sortörés nélkül, egy sorba írható stringek száma.

Egy oszlopnál:
Mobilon.

caption elemnél: 45 string
th elemnél: 43 string
td elemnél: 48 string

Asztalin.
caption elemnél: 45 string
th elemnél: 41 string
td elemnél: 48 string


Kettő oszlopnál:
Mobilon.

caption elemnél: 45 string
th elemnél: 26 string
td elemnél: 22 string

Asztalin.
caption elemnél: 45 string
th elemnél: 25 string
td elemnél: 22 string




Megjegyzés:
Ha mobilon engedélyezzük,
"Egyszerűsített nézet megjelenítését"
akkor az általunk létrehozott táblázat és annak tartalma, némelyik mobilnál, nem jelenik meg.




Összegzés.

Mobil és asztali eszköznél:
HTML elemek stílusát, karaktereinek méretét, az éppen használt böngésző határozza meg.
A string, tartalmazza a karaktereket és szóközöket is.

Weboldal tartalmi rész szélessége: 800px;
Egy sorban megjelenő, stringek száma

<h1> elemnél:
Mobilon: 33 string
Asztalin: 50 string

<h2> elemnél:
Mobilon: 37 string
Asztalin: 67 string

<h3> elemnél:
Mobilon: 39 string
Asztalin: 83 string

<p> elemnél:
Mobilon: 39 string.
Asztalin: 111 string

<p><strong> elemeknél:
Mobilon: 38 string.
Asztalin: 110 string

<pre> elemnél:
Mobilon: 99 string. Olvashatatlan.
Asztalin: 99 string
Határozzunk meg font-size:29pt; értéket.

<li> elemnél:
Mobilon 39 string
Asztalin 114 string

<blockquote> elemnél:
Mobilon 39 string
Asztalin 109 string

<acronym> elemnél:
Mobilon 43 string
Asztalin 121 string

<address> elemnél:
Mobilon 45 string
Asztalin 108 string

<table> elemek tartalma mobilon olvashatatlan, 29-30pt méret alatt.
Következő adatok, 30-31pt értékre vonatkoznak.

<table> egy oszlopnál:
Mobilon.
caption elemnél: 45 string
th elemnél: 43 string
td elemnél: 48 string
Asztalin.
caption elemnél: 45 string
th elemnél: 41 string
td elemnél: 48 string


<table> kettő oszlopnál:
Mobilon.
caption elemnél: 45 string
th elemnél: 26 string
td elemnél: 22 string
Asztalin.
caption elemnél: 45 string
th elemnél: 25 string
td elemnél: 22 string




A fenti adatokból meghatározhatjuk, asztali és mobil karakterek méretét.

Weboldalt mobil telefonon nem, de asztali PC-n tudunk létrehozni és szerverre feltölteni.

Mobilon és asztalin is olvasható legyen minden html elem tartalma, készíthetünk kettő stílus, azaz, CSS fájlt.
Egyik CSS fájlt mobilra.
Másik CSS fájlt asztalira.
Vagy, készíthetünk külön html fájlt, mobil telefonra és asztali változatra is.

Mobil telefonok szélessége
1080px-nél kisebb.
Asztali monitorok szélessége
1080px-nél nagyobb.

Ezen méretek alapján, JavaScript vagy jQuery programmal vezérelhetjük, mikor melyik CSS fájl, vagy html oldalunk jelenjen meg.
Átirányításra mobil és asztali között, több lehetőség is van.




Itt egy minta CSS fájl, melytől mindenki tetszésének megfelelően eltérhet.
Amikor asztalin készítjük a mobil weboldalunkat, CSS-fájlban tiltsuk le, a mobil karakterek méretének meghatározásait.
Amikor szerverre feltöltjük a html és CSS fájlt, tiltsuk le az asztali karakterek méretének meghatározásait.
Vegyük elő mobil eszközünket, és teszteljük le, weboldalunk megjelenését.


800px széles weboldal stílusai mobilon és asztalin:

/*
Szélesség =
width+padding+border
800+3+2=805px
*/

body{
font-family:
Arial, Helvetica, sans-serif;
font-size: 100.01%;
margin: 0.1px;
background-color: #ccc;
}

container{
width: 800px;
margin-top: 5px;
margin-right: auto;
margin-left: auto;
padding-left: 3px;
padding-bottom: 10px;
border: 1px solid white;
}

/*
Karakterek méretei:

Mobilon a pre és table elemek kivételével, a böngésző határozza meg.
*/


/* --- Mobil karakter méretek. --- */
pre{font-size:29pt;}
table{width: 98.5%;}
caption{font-size:31pt;}
th{font-size:31pt;}
td{font-size:30pt;}


/* --- Asztali karakter méretek. --- */
h1{font-size:36pt;}
h2{font-size:33pt;}
h3{font-size:31pt;}
p{font-size:32pt;}
p strong{font-size:30pt;}
pre{font-size:29pt;}
table{width: 98.5%;}
caption{font-size:31pt;}
th{font-size:31pt;}
td{font-size:30pt;}







Megjegyzés:
A <br> vagy <br /> elemek, kötelező sortörést határoznak meg.

A <wbr> elem HTML5-ben, megadja a lehetséges sortörést, ha egy szó túl hosszú.

A <wbr> elem szavak karakterei közötti elhelyezésével, meghatározhatunk sortörést arra az esetre, ha az adott szó túl hosszú arra, hogy a többi szó mellett, egy sorban megjelenhessen.

Ekkor a böngésző dönti el, hogy adott terület szélességénél, mikor alkalmazzon sortörést.




Fenti tatalmi rész megjelenése 900px-es oldalon,
kattints ide!