Hei,
Minulla on ollut jo vuosia kotisivuja, mutta, minulla on aina ollut ongelmana, eri näyttö koot, minä olen ylläpitänyt etusivulla ilmoitusta, joka kehoittaa käyttämään CTRL ja + ja - ja 0 näppäimiä, jos näyttö koko on epämieluisa.
Minä nyt kuitenkin taisin oppia tekemään asian oikein, minä laitoin seuraavan koodin toistumaan javascriptiin etusivulleni.
function mainhtmlzoom ()
{
var lzoomarvo = Math.min(window.innerHeight,window.outerHeight) / 10.4;
if(lzoomarvo<70) lzoomarvo = 70;
if((lzoomarvo>85)&&(lzoomarvo<125))
lzoomarvo=100;
if(lzoomarvo!==lzoomarvovanha)
{
lzoomarvovanha=lzoomarvo;
document.getElementById("mainhtml").style.zoom = ""+lzoomarvo+"%";
}
}Minulla on sitten vielä HTML koodissa, se main <html> muodossa - <html id="mainhtml" class="mainhtml">.
Onko tämä nyt se oikea tapa tehdä tämä käyttäjälle ystävällinen näytön skaalaus, kun meille on nykyään, niin, montaa eri näyttökokoa, on FullHD, ja 4K ja 8K on tulossa.
Onko tämä nyt sitten ihan oikein.
En ole ihan varma toimiiko tämä sitten kaikilla, en omaa koulutusta HTML tai CSS koodiin.
:) :) :)
Ottaako tuo koodi nyt sitten kaikki mahdolliset näyttö koot huomioon ?
Se ei taida toimia firefoxin kanssa ?? mutta, muut toimivat ??
--
Firefox,
Tuo yllä oleva koodi toimii kaikissa muissa paitsi firefoxissa.
Minä yritän nyt firefoxia laittaa skaalaamaan.
Tässä on mitä yritän tällä hetkellä, mutta, tuo ei vielä riitä.
function mainhtmlzoom ()
{
var lzoomarvo = Math.min(window.innerHeight,window.outerHeight) / 10.4;
if(lzoomarvo<70) lzoomarvo = 70;
if((lzoomarvo>85)&&(lzoomarvo<125))
lzoomarvo=100;
if(lzoomarvo!==lzoomarvovanha)
{
lzoomarvovanha=lzoomarvo;
document.getElementById("mainhtml").style.transform = "scale("+(lzoomarvo/100)+") translate("+((lzoomarvo-100)/2)+"%,"+((lzoomarvo-100)/2)+"%)";
}
}Tuo koodi ei skaalaa ihan täsmälleensä oikein, siinä jää pieni tyhjä reunus, ja lisänä jotkut komponentit täytyy vielä lisänä skaalata, kuten tuo <table> ja <div> yläpalkki.
:) :) :)
Lisäys.
Myöskään tämä koodi ei skaalaa firefoxia oikein ??
document.getElementById("mainhtml").style.transform = "scale("+(lzoomarvo/100.0)+") translate("+((lzoomarvo-100)*window.innerWidth/200)+"px,"+((lzoomarvo-100)*window.innerHeight/200)+"px)";Minulla ei ole koulutusta asiaan, olenko minä edes oikeilla käskyillä koettamassa tätä rakentaa ??
--
Skaalausta,
Minä tämän version jätän sivustolleni, nuo ohje kirjat sanovat että firefox ei tue zoomia, niin, minä annan sitten firefoxin olla ilman zoomia ja skaalausta.
Minä tämän seuraavan koodin laitan sivulleni, se toimii ainakin minulla ihan hyvin, voi olla, että, joutuu myöhemmin jotakin säätämään, mutta, jätän tämän version nyt ainakin näin alkuun, katson sitten jos tulee palautetta asiasta.
function mainhtmlzoom ()
{
var lzoomarvo = window.innerHeight / 10;
if(lzoomarvo<20) lzoomarvo = 20;
if((lzoomarvo>85)&&(lzoomarvo<125))
lzoomarvo=100;
if(lzoomarvo!==lzoomarvovanha)
{
lzoomarvovanha=lzoomarvo;
document.getElementById("mainhtml").style.zoom = lzoomarvo+"%";
}
}:) :) :)
Kiitos foorumistanne. :).
--
Paras ratkaisu on tehdä sivulle sellaista sisältöä, että sen voi näyttää hyvin ruudun koosta riippumatta. Usein tällöin sivulle asetetaan jokin maksimileveys, ja CSS:n media query -ominaisuuden avulla voidaan isommalla ruudulla jakaa tekstiä palstoille tai pienellä ruudulla vaikka piilottaa sivupalkki. Yleensä zoomaus ei ole fiksua, koska silloin pienellä ruudulla teksti on liian pientä ja isolla ruudulla liian isoa. (Yleensä 4K-monitori on fyysisesti isompi kuin vaikkapa kännykän ruutu.)
Jos esimerkiksi peliä varten haluat saada aina kuvasuhteen 4:3, voit käyttää suhteellisia yksiköitä. Jos kaikki grafiikka tehdään canvas-elementtiin, ei tarvitse edes kikkailla tekstin koon kanssa erikseen.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Esimerkki kuvasuhteesta 4:3</title>
<style>
html {
background: #333;
/* Tehdään sivusta koko ikkunan kokoinen. */
width: 100%;
height: 100%;
overflow: none;
/* Keskitetään sivun sisältö. */
display: flex;
justify-content: center;
align-items: center;
}
body {
margin: 0;
border: 1px solid black;
background: #efe;
/* Lasketaan sisällölle kuvasuhde 4:3 ikkunan korkeuden mukaan. */
width: 132vh;
height: 99vh;
/* Asetetaan maksimikoko ruudun leveyden mukaan. */
max-width: 99vw;
max-height: 74.25vw;
}
#sivu {
transform: translate(9em) rotate(-20deg);
}
</style>
<body>
<div id="sivu">
<h1>Moi!</h1>
<p>Tämä sivu on tehty kuvasuhteella 4:3.</p>
<p>Peliä varten sisältönä voisi olla vain yksi canvas.</p>
</div>
</body>
</html>Itse olen käyttänyt tällaista skaalautuvaa ratkaisua:
:root {
--fontsz: 16; /* 16px is HTML default */
font-size: calc(var(--fontsz) * 1px);
}
@media(max-width: 960px) {
:root { font-size: calc(var(--fontsz) / 960 * 100vw); }
}
@media(min-width: 1920px) {
:root { font-size: calc(var(--fontsz) / 1920 * 100vw); }
}Älä käytä px-yksiköitä missään määrittelyissä, vaan esim. h1 { font-size: 1.5rem; } (puolitoistakertainen html-fonttiin nähden) tai width: 30ch; (30 merkkiä leveä).
Nyt 960-1920 pikseliä leveillä selaimilla html-elementin fonttikooksi tulee 16px; rajojen ulkopuolella fonttikoko skaalautuu vastaavasti siten, ettei layout enää muutu. Mikäli peruskoko ei miellytä, voit muuttaa --fontsz-arvoa koko sivun skaalaamiseksi.
Aihe on jo aika vanha, joten et voi enää vastata siihen.