0 votes
ago in SoSci Survey (dt.) by s374600 (110 points)

Hi! Ich möchte in der Mobilversion und Desktopversion bei dieselber Frage meiner Befragung unterschiedliche Bildergrössen verwenden. Wenn ich aber die Größen in einer Version anpasse, werden diese automatisch auch in der anderen Version geändert. Wie kann ich das verhindern? Ich möchte, dass die Bilder, die als Antwortoptionen angezeigt werden, in Desktopversion größer sind als in Mobilversion (bei horizontaler Auswahl). Danke im Voraus

1 Answer

0 votes
ago by SoSci Survey (374k points)

Es gibt drei Möglichkeiten:

1) Sie können mit ein wenig CSS im <img>-Tag die Größe automatisch über die verfügbare Bildschirmbreite (oder auch anhand der Breite des Auswahlelements) steuern.

2) Sie können zwei Bilder hochladen und per Filter, abhängig davon in welchem Fragebogen Sie sind oder auch direkt abhängig von der BIldschirmbreite, das jeweilige Bild verwenden.

3) Sie können dasselbe Bild verwenden aber abhängig von Fragebogen/Bildschirmbreite selbiges mit unterschiedlichem HTML-Code einbinden und dabei eine unterschiedliche Größe mittels CSS festlegen.

Wenn Sie Genaueres zu einer der Optionen wissen möchten, kommentieren Sie gerne unter diese Antwort.

ago by s374600 (110 points)
<style>
.choice-img {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    object-fit: cover !important;
}

/* Mobile Version */
@media only screen and (max-width: 768px),
       only screen and (max-device-width: 768px) {
  .choice-img,
  img.choice-img,
  img[src*="Animals-2-low.jpg"] {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    object-fit: cover !important;
  }
}
</style>


Ich habe im Bereich "Fragebogen zusammenstellen" mit dem Code gearbeitet. In der Dekstopversion sowie in der Mobilversion funktionierte er grundsätzlich. Bei einem der Bilder unterscheiden sich die Dimensionen  von den anderen Bildern, und der Befehl "cover" funktioniert bei diesem Bild in der Mobilversion nicht, bzw. das Bild wird nur mittig dargestellt, behält seine ursprüngliche Dimensionen bei.
ago by SoSci Survey (374k points)
Wenn Sie einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite erstellen und posten, können wir gerne einen Blick darauf werfen.

Die Doppelung der Anweisung "object-fit" in beiden Blöcken in Kombination mit dem !important macht es übrigens nicht unbedingt einfacher, das richtige Ergebnis zu erzielen.

Bitte denken Sie auch daran, den CSS-Code nicht per HTML-Code einzufügen, sondern (korrekt) über pageCSS(). Dann natürlich ohne das <style>.
ago by s374600 (110 points)
edited ago by s374600
https://s2survey.net/OrgaVeraenderung26/?act=i7CdzMimBCOxaTW7DRuOA1s0
https://s2survey.net/OrgaVeraenderung26/?act=k3ITyIGF5XQAnE0PYehxHfpg

Das erste Bild ist kleiner, wenn man den Link mit dem Handy öffnet. In der Desktopversion sehen sie gut aus.
Ich hoffe, es geht mit diesem Link.
Soll ich also eher PHP-Code mit "pageCSS('" nutzen? Damit habe ich leider noch weniger Erfahrung. Warum ist es besser über CSS zu arbeiten?
ago by SoSci Survey (374k points)
Sie arbeiten schon mit CSS - und das muss korrekterweise eigentlich in den Header (<head>) der HTML-Seite, nicht in den Inhalt (<body>). Viele Browser akzeptieren beides, aber vielleicht nicht das Browser auf dem Mobilgerät?
ago by SoSci Survey (374k points)
Ich habe beide Links sowohl mit der Firefox-Emulation für Mobilgeräte als auch mit einem Android-Gerät getestet, und da scheint die Darstellung korrekt zu sein. Alle Bilder skalieren da so, wie man es erwarten würde. Was für ein Gerät haben Sie denn zum Testen verwendet?
ago by s374600 (110 points)
Standartbowser Safari auf dem iPhone. Das sieht dann so aus: https://myshare.uni-osnabrueck.de/f/92ede5d6ea5f49b1bdea/
ago by s374600 (110 points)
Darf ich Sie bitte fragen, wo sich der Header der HTML-Seite befindet??
ago by SoSci Survey (374k points)
> Standartbowser Safari auf dem iPhone. Das sieht dann so aus

Hmm ... für mich sieht das genauso aus wie auf dem großen Bildschirm, nur alles kleiner. Bitte erklären sie mir nochmal genau, an welcher Stelle die Darstellung nicht passt?

> Darf ich Sie bitte fragen, wo sich der Header der HTML-Seite befindet??

Diesen sehen Sie nur, wenn Sie in der erzeugten HTML-Seite den Quellcode ansehen würden. Der Punkt ist: Wenn Sie dort Ihren CSS-Code unterbringen möchten, dann verwenden Sie dafür die Funktion pageCSS(), vgl. https://www.soscisurvey.de/help/doku.php/de:create:functions:pagecss
ago by s374600 (110 points)
edited ago by s374600
> Hmm ... für mich sieht das genauso aus wie auf dem großen Bildschirm, nur alles kleiner. Bitte erklären sie mir nochmal genau, an welcher Stelle die Darstellung nicht passt?
 
Das erste Bild in der ersten Reihe sieht kleiner aus als die andere, wenn man das ganz genau anguckt
ago by SoSci Survey (374k points)
Danke - jetzt sehe ich es :) Diese Abweichung tritt unter Android auch auf.

Nur um Artefakte aufgrund unterschiedlich breiter Ziffern auszuschließen: Könnten Sie die Zahl bitte testweise entfernen oder einheitlich über dem Bild platzieren, also z.B.

<div>1.</div><img src="Animals-2-low.jpg" class="choice-img">
ago by s374600 (110 points)
Ich habe es gerade ausprobiert, die Abweichung besteht jedoch weiterhin. Ich habe nun versucht, den PHP-Code in beiden Versionen hinzuzufügen, also sowohl in „base“ als auch in „mobile“. Dadurch sind die Bilder zwar gleich groß, allerdings befindet sich die Nummerierung dann links neben dem Bild und nicht mehr oberhalb. Gibt es eine Möglichkeit, dies so einzustellen, dass die Nummerierung weiterhin oberhalb der Bilder angezeigt wird?

https://myshare.uni-osnabrueck.de/f/516ff24df80b4235ab06/

Willkommen im Online-Support von SoSci Survey.

Hier bekommen Sie schnelle und fundierte Antworten von anderen Projektleitern und direkt von SoSci Survey.

→ Eine Frage stellen


Welcome to the SoSci Survey online support.

Simply ask a question to quickly get answers from other professionals, and directly from SoSci Survey.

→ Ask a Question

...