9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    computer space

    CSS schaal toepassen in header HTML

    Bij het maken van een responsive CSS sheet kom ik het volgende probleem tegen:
    Veel apparaten geven een device-width van pak m beet 320-360 pixels, 375 en 411 pixels bij de nieuwe iPhones.
    Maar dat is eigenlijk veel te weinig wanneer het een retinascherm betreft. Je krijgt dan van die tekst die 4 woorden per regel bevat en pagina’s van 100 schermen onder elkaar.

    Nu wil ik in de basis voor deze maten ontwerpen, maar bij toestellen die groter zijn en hogere pixeldichtheden hebben, een overall-correctie toepassen van bijvoorbeeld 0,7em voor alle tekst.

    Aangezien ik de detectie met de UA doe, plaats ik deze correctie liefst in de header van de HTML. Dus na het aanroepen van de stylesheet.

    Met welke CSS in de header kan ik ALLE CSS definities daarvoor schalen met een factor 0,7?

    Bijdrager
    Shmoo

    Een schaal in font-size pas je toe op basis van formaat (canvas) en de kijkafstand tot dit device niet op basis van het aantal pixels dat ze in een device stoppen. Dan zou je continu bezig blijven omdat Apple niets anders doet dan meer pixels in hetzelfde formaat stoppen.

    Je moet eens kijken naar de viewport.
    http://www.w3schools.com/css/css_rwd_viewport.asp

    Dan is het gewoon een kwestie van de content div een width geven van bijv. 80% en de breedte van de content zal dan 80% van je device-width zijn. kortom 80% van 320 of 80% van 768.

    Bijdrager
    computer space

    Volgens mij snap je het niet. De viewport heeft de device-width. Maar omdat veel toestellen hier bijvoorbeeld 320 serveren terwijl het toestel beter af zou zijn met zeg 400 pixels view port, wil ik juist de tekst verkleinen. Als ik de viewport vergroot krijg je juist al die errors bij mobile-checks dat je content te breed is.

    Ik wil dus alle fonts schakelen, en van de port-breedte afblijven.

    Bijdrager
    Shmoo

    Maar omdat veel toestellen hier bijvoorbeeld 320 serveren terwijl het toestel beter af zou zijn met zeg 400 pixels view port,

    Hoe kan een iPhone 5 met een viewport van 320 beter afzijn met een 400 breedte?

    Dat is hetzelfde als met een vrachtwagen van 2 meter breed op een weg gaan rijden die 1.80 breed is.

    Je komt nooit aan de viewports. Die voeg je alleen maar toe en daarnaast zegt je scale 1.0 zodat de zoom die Apple en Android in hun devices stopt (en dat bij elke generatie anders is) uitgeschakeld wordt. DAARNA ga je op basis van breakpoints schalen met de teksten en wat niet allemaal.

    Dat doe je door de font-size op de body te verhogen/verlagen.

    standaard. (dit is 16px)

    body {
    font-size: 100%;
    }

    (dit is 20px)
    @media ( hier je waarde ) {

    body {
    font-size: 125%;
    }

    }

    Wanneer je overal in je design em of % eenheiden gebruikt zal al je tekst schalen op basis van de breakpoint.

    Bijdrager
    computer space

    Het lijkt te werken als ik de initial scale onder de 1 zet, op bijvoorbeeld 0.7

    Bijdrager
    computer space

    Ik ben eruit:
    Initial scale voor bepaalde modellen lager dan 1,0 zetten. De factor in kwestie berekent ie op basis van useragent en aantal subpixels per type, zodat retina tikje kleinere letters laat zien, OLED beetje ertussenin ivm minder subpixels, en lowrestoestellen houden normale iPhone 1 schaal.
    Bij Apple hanteer ik standaardfactor 0,7 (iPhone 1-3GS kan de boom in!) omdat er geen devide-ID wordt verzonden.
    Voor Windowsphone werkt dit niet, daar device-width via CSS fixen op 1/schaalfactor*320 pixels.

    Eindelijk mijn sites Phablet-first…:)

    Bijdrager
    aartjan.nl/blog

    Heb je ook een voorbeeld-site en een stukje voorbeeld-code?

    Bijdrager
    Fingerlicking

    Je bent op zoek naar font-size: 3vw; denk ik.

    Vw staat voor view-width en kun je op elk element toepassen.

    Bijdrager
    computer space

    Nee, juist niet. Want dan wordt een font steeds groter bij een grotere viewport.

    Mooie van mijn huidige oplossing: ik hoef geen enkel font te schalen, alles is overal even groot. De initial-scale is de bom! Gouden optie.
    Alleen doet Windows-phone niet mee, maar de aanpassing daarvoor is minimaal, namelijk een fixed viewport vaststellen die omgekeerd evenredig is aan de initial scale. En aangezien bots toch niet als windows-phone testen, krijg je voor die hack ook geen strafpunten in je GO.

    Als breekpunt in de CSS gebruik ik nu 600 pixels, dat is ongeveer de breedte die je wilt voor een Galaxy Note 1 of een Lumia 1520 (6 inch). Daarboven heeft de kolom een vaste breedte, daaronder 96% (klein meetje marge links en rechts).

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.