viewport meta kutter bakgrunn i div

Har du spørsmål om HTML, CSS eller Javascript, post det her.

viewport meta kutter bakgrunn i div

Innlegg Sony86 » 12.09.2017 19:45

Hei. jeg jobber med denne siden: http://atbyggservice.no/test.php

Når jeg legger til viewport meta og viser siden på mobil, så blir bakgrunnen i de øverste div'ene kuttet.
Hvis jeg legger inn min-width på div'ene, så forsvinner problemet. Ser best ut med 910px i bredde.

Hva gjør jeg galt, eller hva burde jeg gjort annerledes? Eller er dette løsningen?
Tips mottas gjerne :)
Brukerens avatar
Sony86
Medlem
 
Innlegg: 477
Registrert: 19.05.2004 15:56
Bosted: Norge

Re: viewport meta kutter bakgrunn i div

Innlegg khawaga » 12.09.2017 20:49

Legg til scale, fx
<meta name="viewport" content="width=device-width, initial-scale=1">

Jeg bruker Doro :twisted: så jeg får ikke sjekket det på mobil.
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4872
Registrert: 30.09.2002 22:34

Re: viewport meta kutter bakgrunn i div

Innlegg Sony86 » 12.09.2017 21:32

Det utgjør ingen forskjell, pluss at den zoomer siden noe grusomt på noen telefoner...
Brukerens avatar
Sony86
Medlem
 
Innlegg: 477
Registrert: 19.05.2004 15:56
Bosted: Norge

Re: viewport meta kutter bakgrunn i div

Innlegg khawaga » 13.09.2017 8:23

Neivel. Kanskje du rett og slett skal droppe hele viewport-greia.

Skjer det samme når du tilter mobilen(e) portrait/landscape?

Jeg så på stilarket først nå: gå vekk fra position:absolute. Det bør brukes bare for å plassere ting *innenfor* en div satt relative. Til grunnskjelettet: bruk gjerne section i stedet for div.class og gi alle width:100%. Overlat dermed alt til naturlig float. Og bakgrunnsbilder angitt i px er å be om bråk i dag - om slikt føles nødvendig; da heller småbilder i tiles.
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4872
Registrert: 30.09.2002 22:34

Re: viewport meta kutter bakgrunn i div

Innlegg Sony86 » 13.09.2017 11:45

Eneste som plager meg med å kutte ut viewport, er at noen <br> linjer blir utrolig høye på mobil, så siden ser litt rar ut.

Eneste grunnen til at jeg setter noen div'er som absolute, er at det er så enkelt å sette den til 100% width og da fyller den helt ut.
Nå er jeg ikke ekspert på hva som er best mtp på den biten, men åpen for forslag.

For eksempel footer div'en som er satt som relative, så må jeg bruke
Kode: Merk alt
margin-left: calc(-50vw + 50% - 8px);
for å få den til å fylle helt ut til kantene.
Brukerens avatar
Sony86
Medlem
 
Innlegg: 477
Registrert: 19.05.2004 15:56
Bosted: Norge

Re: viewport meta kutter bakgrunn i div

Innlegg khawaga » 13.09.2017 14:55

Sony86 skrev:Eneste som plager meg med å kutte ut viewport, er at noen <br> linjer blir utrolig høye på mobil, så siden ser litt rar ut.


<br> leses vidt forskjellig av nettleserne, og deles ut til forskjellige systemer på ymse måter. Mest synlig er dette i CMS hos nettaviser, hvor artikler oftest blir brutt opp til totalt usammenheng. Min gamle forfattervenn Erland Kiøsterud kaller slikt for "knekkprosa". Når teksten attpåtil blir forstyrret av "Les også:" og "Anbefalte saker:" - i egne linjer - detter hele artikkelen fra hverandre.
Typografi er ikke bare læren om bokstavenes kropper, men hvordan de skal settes sammen til en helhet som formidler budskapet på best mulig måte. Leseren må få en sjangs til å lese i fred.
Personlig har jeg løst dette ved bruk av margin på p.class og unngått <br> for linjeavstand.

Sony86 skrev:Eneste grunnen til at jeg setter noen div'er som absolute, er at det er så enkelt å sette den til 100% width og da fyller den helt ut.


Alle div fyller helt ut om body er satt 100%., og div følger etter med 100%. Det er når du setter inn absolute som ledende, at problemer oppstår.

Sony86 skrev:For eksempel footer div'en som er satt som relative, så må jeg bruke
Kode: Merk alt
margin-left: calc(-50vw + 50% - 8px);
for å få den til å fylle helt ut til kantene.


Fortell en av dagens nettlesere "-50vw +50 %" samt piksler, og algoritmene ler av deg. Den kunstige intelligensen har kommet så langt at den av og til avslører oss av kjøtt og blod.

Footer er vel kanskje det eneste du bør posisjonere absolutt, men også dette skal være unødvendig i et klassisk html5-miljø.

<edit />Unngå wrapper. Pakking av divs i nivåer er hva som virkelig får nettlesere på trynet. Jeg snakker mot meg selv her, for mitt eget nettsted er spekket av slikt, men det skal ha retrolook.
"Humans are destined party animals. Technology will follow." (Linus Torvalds)
Khawagas oppslagstavle og album
Brukerens avatar
khawaga
Seniormedlem
 
Innlegg: 4872
Registrert: 30.09.2002 22:34


Gå til (X)HTML/CSS/JavaScript/XML m.m.

Hvem er i forumet

Brukere som leser i dette forumet: Ingen registrerte brukere og 6 gjester