újonc- egyből egy kérdéssel...

Szervusztok!
Lacházi Zsolt vagyok, ma bukkantam erre a honlapra és tetszik mind kialakításában, mind pedig a közösség aktivitását, konstruktív hozzáállását illetően.
"Kezdő" vagyok a webfejlesztésben és egy probléma kapcsán kezdtem kutakodni - ez hozott közétek.
Eddig javarészt css-el kombinált "táblázatos" honlapokat készítettem, most pedig szeretnék mobilra is fejleszteni, mert úgy vélem - az analitikák alapján is - hogy egyre több lekérdezés várható ezen eszközökről.

Ha tud valaki az alábbi leírásra egy jó megoldást, kérem, ossza meg velem - mint amatőrrel, lehetőleg egyszerűsített szakmai nyelvezettel.

Mobilra szeretnék tehát honlapot és azt látom, hogy különösen a chrome böngésző esetén a tartalom "összezsugorodik".

Sajnos, 4.0 android oprendszer alatt és Chrome böngészőben a betűméretek szinte olvashatatlanok, pedig a stíluslapban 12px Arial van beállítva.
2,3-as rendszeren, firefoxban nem jelentkezik a hiba. Álló és elforgatott helyzetben is rendes a betűméret. Valamiért a Chrome - ami a google play-ról letölthető - "összenyom" mindent.

Egy fórumcikkben négy taget javasol a szerző:
<meta name = "viewport" content = "width = device-width"> <!--a készülék képernyőjének szélességéhez igazodik!-->
<meta name = "viewport" content = "initial-scale = 1.0"> <!--nagyítás mértéke lebegőpontos számmal-->
<meta name = "viewport" content = "user-scalable = yes"> <!--felhasználók nagyíthatják, átméretezhetik-e az oldalt (yes/no)-->
<meta name = "viewport" content = "maximum-scale = 1.0"> <!--Maximum mekkorára lehessen nagyítani (ennek csak a 3 pont yes értékénél van értelme)-->

A firefox és opera megjelenítést ez meg is oldotta. Nincs Iphon-om, így safariban nem látom, de chrome alatt biztosan rossz.

Az átirányítás a fő domainről az aldomainre megtörténik rendesen, de a tartalom stabilitására nem találtam jobb megoldást.

Mi lehet a gond és hogyan lehetséges az, hogy a chrome a tag-ben lévő tiltás ellenére is lehetővé teszi a nagyítást-kicsinyítést?

Előre is köszönöm!
Lacházi Zsolt

Üdv a fórumon!

Hallottam már erről, hogy az androidos chrome-alapú böngésző máshogyan renderel és sajnos nem sok megoldás van.

Kód:

---

body{font-size:100%;}

i{font-size: 2em;}

@media screen and (min-width: 500px){   
body{font-size: 150%;}
}

@media screen and (min-width: 700px) {
    body{font-size: 200%;}
 }

---

Nem próbáltam még ki, egy külföldi site-on néztem utána. Annyi hibája van a kódnak, hogy ez minden böngészőre át fogja méretezni a felbontások-szerinti betűméreteket. Ha megadsz minimum értékeket, talán történik valami javulás az ügyben. Ha nem jönne össze írj ide, hogy nem sikerült, addig megpróbálok keresgélni.

Amennyire én tudom, erre nem is fogsz találni jó megoldást, kivétel, hogy mindenre külön stíluslap. Ugyanaz van, mint desktopon. Ahány böngésző, annyi motor, azon belül meg sok változat. Tehát hiába adod meg a betűméretet, lesznek eltérések. A böngészők között ráadásul elég nagy eltérés is lehet, van, amelyikben majdnem 2x akkorának látszik ugyanaz a betűtípus/betűméret, mint egy másikban. Ez nem csak a betűtípusra igaz, hanem úgy általában a méretekre sajnos, de nem túl következetesen (itt most elsősorban a js méretekre gondolok). Persze lehet, hogy létezik egyszerű megoldás, ha van ilyen, az engem is érdekelne.

Üdv a fórumon!

Iphone-t itt tudsz tesztelni: MobileTest.me - Test your mobile sites and web applications right from your browser

Egyébként elég sok olyan free oldal van, ahol különböző eszközökön tudod tesztelni az oldaladat, hirtelen ezt találtam.

Itt van néhány tipp teszteléshez:
8 Popular online apps to test the mobile version of your site | Webdesigner Depot

Ha befutott az oldal, akkor érdekes lehet egy Analytics riport kereteiben az iPhone felhasználók viselkedését is figyelemmel követni.

Köszi a tippeket! Kipróbálom feltétlenül Csurga kódját és megírom az eredményt. A tesztelős oldal nagyon klassz, megnyugtató képet ad - bár a "8 popular..." oldallal nem tudtam dűlőre jutni...

Érdekes hogy:
A 4.0 android rendszeren futó chrome a betöltéskor jól jelenít meg mindent, ha elforgatom a készüléket, akkor is jó a méret de!: Ahogy visszafordítom álló helyzetbe, minden "összenyomorodik"! Szerintem ez böngészőhiba, mert a többi böngészőn ilyet még nem tapasztaltam. Opera, Firefox és 2.3-as Galaxy Advance készülékböngésző alatt is tökéletes.

Zalánnak írom, hogy egy befutott oldalunk statisztikája alapján a mobillekérdezések zöme Iphone-ról érkezik. Éppen ezért is kell mobilra optimalizálni. A többi telefon lekérdezése még a fele sem az Iphone-nak.
Egyébként érdekes, hogy az m.laptopszalon és a construma mobiloldalak minden böngésző alatt azonos méretben jelennek meg. Ez viszont ellentmond a "feltételezett hibámnak"...

Nem arra gondoltam, hogy van-e forgalom iPhone-ról, hiszen írtad, hogy a statisztika is megkövetelte az mobil oldalt. Hanem arra, hogy mondjuk egy alap Androidos telefonhoz képest az iPhone userek hogy viselkednek az oldalon? Lehet op rendszert vagy böngészőt is vizsgálni.

Helló!
Megnéztem a kódot. Sajnos nem jobb, bár lehet, hogy valamit nem jól értelmeztem...
Nem tudom, mi az az "i", aminek a fontmérete 2em és a media screen szerepe sem világos számomra.
Minden esetre beépítettem de továbbra sem jó.
Amikor először betöltődik az oldal akkor jó minden, aztán elfordítva a készüléket úgy is jó - visszafordítva álló helyzetbe viszont összemegy a tartalom "miniatűrizáltba"...
Mintha visszafordításkor átértelmezné a dolgokat a chrome - lehet, hogy tényleg külön css kellne hozzá? De ott is kell valami fix méret, ez lehet a kulcsa az egésznek.

body {-webkit-text-size-adjust:none}

Kipróbálva, ahol megnéztem, ott működik. Legalábbis a 2x-es megjelenítést megoldja.

Sziasztok!

Megvan a megoldás, legalább is az eddigi tesztek alapján úgy tűnik, jól működik minden fontosabb mobilböngészőnél. A problémára tehát - miszerint a különböző mobilböngészők, főleg a chrome mobilváltozata a méreteket átértelmezi - ez a sor a válasz:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Aki tudja, kamatoztassa!

Újabb kérdésben is kikérném a véleményeteket:

Hogyan tudok a tárhelyemre felmásolni egy fájlt úgy, hogy az a különböző FTP programok "rejtett fájl látszik" beállítása ellenére se legyen látható olyanok számára, akik szintén ismerik a tárhely belépési adatait és használják a domain almappáit?

Előre is köszi! Szép napot mindenkinek!
Lacházi Zsolt