Responsiv webside - hjelp! (HTML5-CSS3)

6. oktober 2014

Hei,

Jeg har en responsiv webside som fungerer fint. Derimot har jeg en ramme inne i denne siden som henter opp innholdet fra en annen web-side som ikke er responsiv. Når noen skalerer ned innholdet på min side, så skalerer ikke innholdet i denne rammen seg, men viser da bare noe av innholdet (altså et hjørne av websiden inne i rammen min). Jeg ønsker at innholdet fra den andre websiden skal skaleres ned som om det var et bilde når noen skalerer ned min web-side.

Er dette mulig?

danielsk

2.224 689

6. oktober 2014

Her har du eksempelkode på hvordan du endrer skalering på innholdet i en iframe. Tviler på at det er en god løsning, da innholdet sannsynligvis vil bli for smått til å være brukbart.

Kode

<style>
    #iframe {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

Sist endret av danielsk; 6. oktober 2014 kl. 11:58.

Yochi

1.020 230

6. oktober 2014

Jeg vil si det så enkelt som at det ikke er mulig, om siden ikke er bygd opp på en responsiv måte vil du ikke få et bra resultat når du viser den i en iframe som er mindre enn hva den er lagd for.

Løsningen til danielsk vil ikke fungere heller, for det koden gjør er å redusere selve iframen til 75% av orginal størrelse, så en side som er for stor vil fremdeles være for stor.

danielsk

2.224 689

6. oktober 2014

Så vidt jeg forsto var det innholdet som ville skaleres, men les gjerne i denne tråden hvor jeg fant det originale løsningsforslaget: http://stackoverflow.com/questions/1...t-of-an-iframe

Yochi

1.020 230

6. oktober 2014

Ah, da skjønner jeg hva de prøver på, du manglet en liten del av koden:

Kode

#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }

De har en wrapper rundt iframen, også er iframen større enn wrapperen, forså skalert ned.

Mulig det vil funke bra nok, men for at det skal være responsivt må man bruke endel javascript for å vite hvor mye man må skalere ned til en hver tid. Også må du vite hvor bred/høy siden inne i iframen er på forhånd siden javascript i utgangspunktet kan kommunisere ned i iframen.

Jeg går også ut fra at en side vil bli uleselig på foreksempel en mobil.

vanskeliggreier

Trådstarter

13 0

8. oktober 2014

Tusen takk for svar. Dette hjalp meg mye, og har nå fått responsivt "bilde" av websiden i min egen webside.