Avaleht
uus teema   vasta Tarkvara »  WWW »  Kuidas erinevalt scaletud displayd ühtsetena näidata? märgi kõik teemad loetuks
märgi mitteloetuks
vaata eelmist teemat :: vaata järgmist teemat
Hinnavaatlus :: Foorum :: Uudised :: Ärifoorumid :: HV F1 ennustusvõistlus :: Pangalink :: Telekavad :: HV toote otsing
autor
sõnum Saada viide sõbrale. Teata moderaatorile
otsing:  
es1
HV kasutaja

liitunud: 01.02.2008



Autoriseeritud ID-kaardiga

sõnum 09.03.2022 14:09 Kuidas erinevalt scaletud displayd ühtsetena näidata? vasta tsitaadiga

Mul on OSis display scale 100%, panen erinevates resodes ilusti asjad paika. Peale seda tuleb keegi ja ütleb, et kogu teema on liiga suur, kuna tema display scale on OSis pandud 125%. Kuidas sellist asja ühtsutada, et tema arvutis scaleks lehekülge 25% väiksemalt? Öelda, et pane scaling 100% pole võimalik, ega mõtet, sest see on paljudel läptopidel 125% default, ehk recommended peal.
Kommentaarid: 9 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 9
tagasi üles
vaata kasutaja infot saada privaatsõnum
Alan
HV veteran
Alan

liitunud: 12.02.2008



Autoriseeritud ID-kaardiga Online

sõnum 09.03.2022 15:25 vasta tsitaadiga

Kõlab nagu lehekülg ei ole ehitatud "fluid". Kui lehekülg peaks nägema välja erinevate scalede, brauseri zoom levelitega, siis on see "fluid" ja resolutsioonidega kohanema, siis "responsive".

Mis ühikutes suurused CSSis määratud on?
Tuleb CSS-is suuruseid määratleda nõnda, et need oleks sõltuvusest näiteks viewporti suurusest.

https://www.smashingmagazine.com/2016/05/fluid-typography/
https://css-tricks.com/snippets/css/fluid-typography/

Näiteks, kui määrata root elemendile font-size "vw" (view port width)
html { font-size: 2vw; }

siis child elementide "em" ja "rem" ühikud sõltuvad root elemendist, ehk siis
h1 { font-size: 2em; }

puhul h1 elemendi font size=4vw (root 2vw * child 2em).

Nõnda tuleb kogu disain üles ehitada, fluid & responsive.
Kui kasutuses font-size "px" ühikutes, siis on see fikseeritud ja ei sõltu viewporti suurusest. Nõnda on suuremal resol tekst väikesem, väiksemal resol suurem.


Proof of concept:
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      html {
        font-size: 1vw;
      }
      h1 {
        font-size: 1.5em;
      }
      p {
        font-size: 1em;
      }
    </style>
  </head>
  <body>
    <h1>tere maailm</h1>
    <p>tere tere</p>
  </body>
</html>


Erineva scale/browseri zoomiga on tekst ikka täpselt sama suur. Kui root elemendilt font-size: 1vw eemaldada, hakkab scalemine mõjutama.
Kommentaarid: 127 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 117
tagasi üles
vaata kasutaja infot saada privaatsõnum mine selle kasutaja kodulehele
mikk36
HV Guru
mikk36

liitunud: 21.02.2004




sõnum 09.03.2022 15:44 vasta tsitaadiga

See meta tag muudab natuke mängu, sest mobiilsed seadmed eelistavad renderdada teravamalt sel juhul asju. Skaala ei ole enam 1:1 ja mobiiliekraani 1080 px laius ei tähenda, et veebileht oleks 1080 px lai.
DPR 3 puhul näiteks on siis veebilehe laiuseks vaid 360 px. DPR väärtust määrab telefon ise (kasutaja saab seda mõjutada, kui muudab seadistusest skaleeringu/teksti suuruse sätet.

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

See võimaldab suurustes kasutada rahulikult px ühikuid edasi.

Edit: tegelikkuses mõjutab see ka desktope, sest ka neil on nüüd levinud skaleerimine. Windows + sülearvuti korral on nüüd üsna levinud näiteks DPR 1.25 ja 1.5 (Settings -> Display -> Scale 125%/150%).
Kommentaarid: 85 loe/lisa Kasutajad arvavad:  :: 0 :: 2 :: 78
tagasi üles
vaata kasutaja infot saada privaatsõnum
es1
HV kasutaja

liitunud: 01.02.2008



Autoriseeritud ID-kaardiga

sõnum 09.03.2022 16:56 vasta tsitaadiga

Mis mind praegu päästis oli max-height lisamine breakpointi, nii et selle isiku arvutis näeb ka kogu sisu scrollimata ja lahendatud icon_rolleyes.gif
Kommentaarid: 9 loe/lisa Kasutajad arvavad:  :: 0 :: 0 :: 9
tagasi üles
vaata kasutaja infot saada privaatsõnum
näita postitusi alates eelmisest:   
uus teema   vasta Tarkvara »  WWW »  Kuidas erinevalt scaletud displayd ühtsetena näidata?
[vaata eelmist teemat] [vaata järgmist teemat]
 lisa lemmikuks
näita foorumit:  
 ignoreeri teemat 
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis



Hinnavaatlus ei vastuta foorumis tehtud postituste eest.