Vent venligst ...


Loading...
Teknisk Dokumentation
Hjemmesider

Responsivt betalingsvindue

Få responsive design med ePays betalingsvindue

ePays betalingsvindue kan automatisk tilpasse sig skærmens størrelse, så vinduets layout vises korrekt på computere, tablets og smartphones (responsive design). Det fungerer ved, at du definerer flere forskellige layouts i en CSS-fil, som bygger på media queries. Designet ændrer sig så, når størrelsen på skærmen er under en given pixelstørrelse.

Klik her for at få mere information om de forskellige skærmstørrelser

Prøv eksempel

Klik her for at hente et eksempel med løsningen 

Bemærk, at eksemplet henter vores cssurl, så hvis du vil bruge din egen, skal du lægge den online og hente den gennem feltet cssurl.

Se eksempel

Hvis du bruger denne løsning, vil betalingsvinduet på en normal skærm se ud som på billede 1 nedenfor (klik for at se billedet i stor størrelse).

Hvis enhedens skærm er mindre end 420px, skifter betalingsvinduet udseende og ser ud som på billede 2.

Responsive (uden CSS)

ePays betalingsvindue tilpasses som standard til den enhed, som kunden bruger. Dette sker ved hjælp af en såkaldt ’user agent’.

Du kan dog fremtvinge det mobile betalingsvindue ved at sætte parameteren mobile til 2. Klik her for at få en nærmere beskrivelse af parameteren.

Hvis du vil teste, hvordan denne registrering finder sted, kan du hente dette plugin til Chrome – du vil så kunne se, hvordan betalingsvinduet ændrer udseende efter den valgte ’user agent’. Bemærk, at mobile SKAL være 1 for at teste dette.