Tapio-Huuhaa

Vapaa kuvaus

Harrastuksena www-suunnittelu, ristikoiden ratkonta ja kuntoliikunta. Digipiirtämistäkin pitäisi ehtiä harrastamaan, mutta se on jäänyt.

Aloituksia

267

Kommenttia

7703

  1. Turpo-Urpo-1:lleiPad+..............................768x1024eikös+iPad+ole+n.+1500x2000iPad+Pro+.....................1024x1366eikö+iPad+Pro+ole++n.+1700x2700Outo+juttu+tuo+iPad+Pro+-+mielestäni+näytit+pystysuuntaan.Yritin+laittaa+tällä+määrittelyllä+ison+fontin+iPad+9,7:lle+ja+iPad+Prolle:/*+iPad+9,7;+2K+ja+iPad+Pro+pystyoptimointi+1520-1668+*/@media+screen+and+(min-width:1520px)+and+(max-width:1668px)tuossa+on+17px+fonttikokomääritys.+1600px+tietokonenäytöllä+näytti+tosi+isolta+ja+arvioin,+että+näyttäisi+sopivalta+iPadeilla+&+2K-laitteilla++kun+laitteita+käytetään+pystysuunnassa.En+ymmärrä,+mikä+mättää.
  2. Kokeilin+70%+pienennyksellä+ja+laittamalla+ikkunan+iPad+9,7+leveydelle.+Olisi+tämä+sivusto+kuten+omanikin+luettavissa+iPadilla+ilman+fontin+suurentamista.+Kännykkäkoossa++olisi+kyllä+aika+tihrua.+Ehkä+se+fonttikoon+kasvatus+ei+ole+tarpeen+kuin+kännyköille.
  3. Katsoin+tämän+sivun+käännepistettä.+Näemmä+vain+yksi+alle+800px+valikot+menevät+kasaan+(kuten+minullakin).Täysleveällä+näytöllä+sama+fonttikoko.+Jos+on+800x1280+laite,+sivuilla+on+kaikki+olennainen+ja+aika+sopivan+kokoiseksi.Jos.+näyttö+on+1600px,+fonttikoko+on+sama,+minkä+täytyy+näyttää+varsin+pieneltä+2K+tablet-laitteessa.Tälläkin+sivustolla+fonttikoon+pitäisi+elää+näytön+pikselimäärän+mukaan.
  4. En+yritäkään+kaikilla+selaimilla.+Selamet+tulee+päivittää+säännöllisesti.+Uusien+Android-laitteiden+mukana+tulee+kunnon+selain.+Safarilla+en+voi+luottaa+muuhun+kuin+W3C:n+taulukoihin,+mikä+missäkin+laitteissa+on+tuettu.+Firefoxin+tiedän+entuudestaan+tukevan+hyvin+CSS:ää+ja+luotan+siihen,+että+näyttää+suurin+piirtein+samoin+kuin+Chrome.Käytän+leiskaa,+joka+lähtökohtaisesti+on+suunniteltu+skaalautumaan+portaittain+CSS:n+avulla.+Esillä+on+yksi,+kaksi+tai+kolme+rinnakkaista+aluetta.+Jos+ei+mahdu+rinnalle,+laitetaan+peräkkäin.En+perusideaa+lähtenyt+muuttamaan+vaan+sopeutin+omat+muutokseni+leiskan+perusideaan.+Uudet+WordPress-leiskat+on+tehty+tällä+periaatteella.Itse+asiassa+lisäsin+siihen+jatkoa,+jotta+fonttikoot+olisivat+miellyttäviä+korkearesoluutioisessa+näytössä.Esim.+Matkapuhelinfoorumi+toimii+yksinkertaisemmin.+Ongelmana+on,+että+fonttikoko+ei+ole+järkevässä+suhteessa+näytön+kokoon+nähden.Tein+HD-näytölle+ja+2K+näytölle+määrityksen,+jossa+fonttikoko+on+järkevä+suhteessa+käytettyyn+leveyteen.+Näin+siis+silloin,+kun+laitteita+pidetään+pystyasennossa.+Vaakasuuntaan+siirryttäessä+fonttikoko+pienenee+rajun+puoleisesti,+koska+2500px+näyttö+käyttää+fontteja,+jotka+on+suunniteltu+1280+px.+laitteille.+Myös+toinen+puoli+näyttöä+jää+tyhjäksi.Jos+näin+ei+ole,+käyttäjä+joutuu+jatkuvasti+skaalaamaan+sivua,+että+teksti+on+kunnolla+luettavaa.
  5. Yritin+vähän+tutkia+asiaa.+W3C:n+mukaan+niissä+on+mukana+CSS:n+ohella+hieman+JavaScriptiä.+Lienevät+toimivan+samaan+tapaan+kuin+sivustoni+oikean+yläkulman+hakulomakkeet,+mutta+mukana+on+leveystarkistus.https://www.w3schools.com/howto/howto_js_collapsible.asp
  6. Millä+periaatteella+selain+pistää+valikon+kasaan?+Se+vaihtelee+teemoittain,+mutten+tiedä,+mikä+määrittää+vaihtumisen.+Kun+olin+työelämässä+ja+tein+www-sivuja,+ilmiötä+ei+silloin+ollut+olemassa.
  7. nostin+perusfonttikoon+17px.
  8. sori,+sain+muutettua+-+lisäsin+vielä+yhden+elementtitason. body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+p+label, body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+legend, body.bbpress+div.bbp-topic-form+form#new-post+fieldset.bbp-form+textarea.bbp-the-content++{ font-size:+15px+!important; }
  9. *piip*Syy+fonttiongelmiin+on+siinä,+että+laitettu+lomakkeiden+yhteyteenlink+rel='stylesheet'+id='dashicons-css'++href='https://www.sanaristikkofoorumi.net/wordpress/wp-includes/css/dashicons.min.css?ver=5.0'+type='text/css'+media='all'link+rel='stylesheet'+id='editor-buttons-css'++href='https://www.sanaristikkofoorumi.net/wordpress/wp-includes/css/editor.min.css?ver=5.0'+type='text/css'+media='all'Selain+siis+lukee+nuo+aina+viimekseksi.
  10. Ei+kellään+olisi+iPadia+tai+jotain+korkearesoista+muuta+tablet-laitetta.Fonttikoot+on+muuten+melko+OK,+paitsiAvainsanat:+Ilmoita+vastauksista+sähköpostillajäävät+naurettavan+pieniksi.+Ja+orientaatiota+vaihdettaessa+ero+on+suuri!Olikohan+tuossa+järkeä?
  11. Otsikkoa+ei+voi+tuolla+lailla+jakaa+koskematta+PHP-koodiin.Alaotsikko+tulisi+normaalisti+vasemmanpuoleiseen+palkkiin,+mutta+se+ei+ole+yleensä+esillä.Alaotsikkoa+ei+siten+voi+käyttää.Otsikon+muotoilua+ei+voi+muuttaa+kuin+fonttikoon+osalta.Suurin+ongelma+tässä+on+mainitsemani+tiettyjen+fonttien+koko.Nostin+fonttikokon+iPad+9,7:lle+15px,+MUTTA+kun+se+ei+vaikuta+aiemmin+mainittuihin+kaikista+pienimpiin+fonttikokoihin.+Niistä+tulee+iPad+9,7:ssa+ja+sitä+paremmissa+laitteissa+aivan+mahdottomia+lukea+ilman+sivun+suurentamista.Leiska+on+tehty+niin,+että+maks.+ajateltu+koko+on+mainitsemani+800x1280+näyttö.+Sitä+isommissa+tietyt+fonttikoot+ovat+ihan+mahdottoman+pieniä.
  12. En+nyt+oikein+ymmärrä,+miten+noi+kuvakaappaukset+on+tehty,+joten+en+osaa+kommentoida.+En+ymmärrä,+miten+toisessa+vain+otsikon+fonttikoko+on+eri.Kokeilin+äsken+iPad+9,7,+2K+ja+iPad+Pro+laite+pystyyn+laitettuna+-+suunnittelua+tällä+säännöllä:@media+screen+and+(min-width:1520px)+and+(max-width:1668px)ja+testasin+tällä+sivulla:https://www.sanaristikkofoorumi.net/wordpress/forums/forum/sanaristikot/suomen-kuvalehti/Sain+mittasuhteet+oikein,+mikä+on+varsin+hankalaa.+Kaikki+aiemmat+@media+screen+and+(min-width:XXX)+määrittelyt+sotkevat+suunnittelua.+Ne+vaikuttavat+taustalla+ja+kaikki+edeltävät+muutokset+pitää+ottaa+huomioon.Tällä+CSS:llä+ei+ole+mitään+vaikutusta: body.bbpress+form#new-post+fieldset.bbp-form+p+label, body.bbpress+form#new-post+fieldset.bbp-form+legend, body.bbpress+form#new-post+fieldset.bbp-form+textarea.bbp-the-content++{ font-size:+11px+!important; }jos+haluaa+hallita+fonttikoot+resoluution+mukaan,+noita(kin)+pitäisi+pystyä+hallitsemaan.
  13. Ihan+vaan+tiedoksi,+että+nykyisin+käyttämäni+teema+on+suunniteltu+johdannossa+mainittu+laite+huomioiden.Sivujen+leveyssuuntainen+huomiointi+on++lopetettu+1280+kohdalla.Pystyisin+tietokoneellani+ottamaan+huomioon<em>+iPad+9,7</em>:n+pystysuuntaan+laitettuna+(tällöin+pikselimäärä+on+1536).+Samoin+pystyisin+suunnittelemaan+sivut+2K-näytölle+laite+pystysuuntaan+laitettuna.+Jälkimmäinen+toimisi+myös+suht.+hyvin+<em>iPad+Pro+10,5</em>+kanssa,+jossa+pikselimäärä+on+laite+pystysuuntaan+laitettuna+1668px.Ongelmana+on+se,+että+tablet-laitteella/älykännykkä+voi+sivuja+katsoa+myös+laite+vaakasuunnassa.+Minulla+ei+ole+mitään+mahdollisuuksia+huomioida+em.+laitteita+laitteen+vaakasuuntaan+asetettuna.+Pitäisikö+laittaa+muistutus,+että+pidä+laite+pystysuunnassa?Jos+fonttikoot+ja+kaikki+muut+olisi+optimoitu+pystysuuntaan+laittamista+ajatellen,+vaakasuuntaan+laitteen+laittaminen+muuttaisi+tilannetta+radikaalisti.Minä+en+voi+muuta+kuin+arvata,+mikä+olisi+järkevää.+Joillakin+Android-laitteilla+näyttö+on+1900px.+Voisin+vain+arvata,+mikä+olisi+hyvä+1900px+tai+sitä+suuremmille+näyttöresoluutioille.Kannattaako+siis+yrittää+luoda+iPad+9,7,+2K-laitteiden++ja+iPad+Pro+10,5:n+pystynäytöt+huomioivaa+leiskaa?
  14. Laitoin+"paikkalapun" body.bbpress+li#reunus-li+{ display:block; height:50px; width:240px; position:fixed; left:0px; top:48px; background-color:rgb(13,113,180); z-index:000000000000000 }Pystyi+korjaamaan+vain+"paikkalapulla",+sillä+haku+piti+asemoida+oikeaan+reunaan+ja+sille+piti+aina+määritellä+tarkka+pikseliarvo.Laitoin+haun+foorumiosastolle+kiinteäksi+kaikilla+sivuleveyksillä.+Mitä+käyttäjäystävällisyyden+huomioimiseen+tulee,+foorumisivustoni+on+netin+parhammistoa.+Kaikki+löytyy+maksimaalisen+helposti.+Skrollausta+on+mahdollisimman+vähän,+sillä+on+nuolet+sivun+ylälaitaan+ja+alalaitaan+väh.+800px+levyisellä+näytöllä.+Sivuilla,+joilla+voi+kirjoittaa,+nuoli+vie+lomakkeen+kohdalle+(muilla+ns.+footer-osioon).+Jos+joku+löytää+käyttäjänäkökulmasta+paremmin+toteutun+foorumin,+saa+tulla+kertomaan.
  15. Tuon+tapaista,+mutta+leveysarvojen+suhteen+suht.+saman+näköisenä+kuin+muilla+sivuilla.+Sain+toimimaan+suht.+nätisti.Joissakin+kohdin+pieniä+ongelmia+tilanteessa+kun+vasemmalle+tulee+kolmas+lohko.Hakulomakkeen+vasen+reuna+ei+aina+asetu+vasemman+reunan+sinisen+rajakohtaan.Pikkasen+ärsyttää+teemassa+se,+että+ihan+liian+paljon+hakulomakkeen+leveys+vaihtelee+leveyden+mukaan.+Kaksi+arvoa+riittäisi+200px++kapealle+ja+400px++leveälle+näytölle.+WordPressin+leiskoissa+kikkallaan+vähän+liikaa+leveysmuuttuvilla+arvoilla.+Niihin+on+työläs+päästä+kärryille.+Muuttamisessa+saa+olla+tosi+huolellinen.foorumiosiossa+leveydet+eivät+ole+samat+kuin+muilla+sivuilla,+koska+halusin,+että+800px+leveällä+näytöllä+oikeanpuoleinen+palkki+on+mukana.+Sitä+piti+kaventaa.+Sitä+piti+kaventaa+kautta+linjan.Nykyajan+leiskat+ovat+sen+verran+komplekseja+että+niiden+kanssa+saisi+tuhrattua+aikaa+loputtomiin.Kokonaisuus+on+nyt+varsin+siisti.
  16. Siirsin+toiseen+paikkaan.+Ainoa+ongelma+on+leveysmäärittely,+jota+ei+saa+dynaamiseksi+vaan+menee+aina+hyppäyksittäin.
  17. Tuntuu+kaatuvan+z-index+-ongelmiin.+Jos+haluaa+nostaa+alhaalta+ylös,+ylävalikko+lakkaa+toimimasta.Millään+ei+viitisi+koskea+php-koodiin.
  18. No+laitoin+ihan+pienen+pätkän+JavaScriptiä,+jolla+sain+toimivuuden.+Pieni+kosmeettinen+ongelma+jäi.Palkin+vasempaan+reunaan+jäi+13px+marginaali,+jota+en+saa+pois.+Jos+siirrän+elementtiä+virhe+tulee+oikeaan+reunaan.Laitoin+alapalkkiin+sen+ylimääräisen+elementin,+jonka+siirrän+CSS:.ssä+oikeaan+paikkaan.+Muualle+en+saa+sitä+laitettua+koskematta+lähdekoodiin.+Jokin+footer-osioissa+saa+aikaan+sen+13+px:n+suuruisen+ongelman.Leveysseikat+pitää+vielä+fiksata.
  19. Testasin+tuon.+Ei+toimi.++li:active+ul+pitää+esillä++ul-elementin+vain+hetkeksi.li:hover+ul+taas+näyttää+silloin+kuin+ei+pitäisi.Täytyy+tehdä+JavaScriptin+avulla.
  20. tai+voisihan+tuota+kokeilla++ul:active+-+kai+se+lomake+sen+ajan+pysyy+paikallaan,+että+voi+kirjoittaa+haun?Ei+tarvitisisi+etsiä+JavaScript-toteutusta.https://www.w3schools.com/cssref/sel_active.aspmukaan+toimii+muillekin+kuin+linkeille
    21. 384 / 386
TietosuojaselosteKäyttöehdotEvästeasetuksetSäännöt