Bilder in Opera Mobile und Co.

BlackHawk3 · 26.10.2012

Guten Tag,
ich bin gerade dabei eine Webanwendung zu bauen für Smartphones.

Die komplette Breite und Höhe des Displays ist mein "Viewport" also height und width jeweils 100% und alles was drübersteht wird mit overflow:hidden; ausgeblendet. Soweit alles auch kein Problem.
Mein Display hat eine absolute Breite von 980px (mit JS ausgemessen). Ich lade in den Body ein Bild das ist 2200px breit. Und nun kommt das Problem.

Das Bild wird auf mein Display komplett angezeigt. Also es wird quasi auf 980px breite geschrumpft. Lese ich aber die Breite mit JS aus, sagt er mir das das Bild 2200px breit ist und nicht 980.Ich möchte anfangs aber nur ein Ausschnitt davon sehen.

Um das zu kompensieren habe ich mir den "opera-faktor" ausgerechnet. Der ist 2,245.
Rechne ich also 2200px X 2,245 komme ich optisch zum selben Ergebnis wie ich es Beispielsweise in Firefox Mobile sehe. Ich sehe also ein bisschen weniger als die Hälfte am Anfang.

Ich hoffe ihr konntet mir so ein bisschen folgen.

Fehlt mir da irgendein Hintergrund über die Funktionsweise von Opera im Umgang mit Bildern, oder voran kann das liegen? Durch das künstliche Strecken des Bildes mit dem Faktor, zerschiesst es mir das ganze Skript und ist daher keine gute Lösung.

Übrigens bei Safari ist das auch so. Der Faktor wäre dort aber ein bissschen kleiner.

LG
Nico

randacek_pro · 26.10.2012

AW: Bilder in Opera Mobile und Co.

Könntest du bitte mal den Code plus das Stylesheet (CSS) posten um zu sehen, welche Parameter du bisher angegeben hast, bzw. wie dein Markup aussieht?

Ziel sollte ja auch hier ein fließendes Layout ein Responsive Design sein und nicht eine Version pro Browser

Wenn du aber dem Bild 100% des Viewports gibst, wird es auch 100% des Viewports ausfüllen

Aber am konkreten Code lässt sich das besser (er)klären.

Lieber Gruß

BlackHawk3 · 26.10.2012

AW: Bilder in Opera Mobile und Co.

Das ist dann mal der HTML-Teil

Code:

<body id="body">
<div id="dragfenster">
	<div id="plan">
		<img src="Bilder/plan.jpg"  border="0" id="pic" style="width:2200px !important;" />	
        </div>
</div>
</body>

Und hier der CSS-Teil:

Code:

		html, body {
			background-color: #fff;
			font-size:12px;
			margin: 0;
			padding: 0;
			height:100% !important;/* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
			width:100%  !important;
			font-family:Arial, Helvetica, sans-serif;
			overflow:hidden !important;
		}

               #dragfenster {
			position:absolute;
			display:block;
			overflow:hidden;
			background-color:#00CC00;
		}
		
		#plan {
			position:absolute;
			overflow:hidden;
		}

Ich denke es wäre dann in dem Zusammenhang noch gut zu erwähnen, dass das ganze an JQuery UI hängt. Ist alles richtig eingebunden und funktioniert auch. Anzumerken ist, dass der folgende Code nach dem </body> geladen wird.

Code:

<script type="text/javascript">

$(document).ready(function() {	
         $("#plan").draggable({ containment: "#dragfenster", scroll: false });
});
</script>

Das funktioniert in allen Desktop-Webbrowsern und im Firefox Mobile. Also die richtige Darstellung des Teilbereiches+Draggable.

In Opera und Co ist nur die geschrumpfte Bildgröße das Problem.

Ich hatte das ganze auch schon soweit reduziert ohne Jquery und Co, dass am Ende nur noch das Bild im Body stand. Der Effekt war der gleiche. Das Bild wurde in Opera geschrumpft.

midgard18 · 26.10.2012

AW: Bilder in Opera Mobile und Co.

ich denke hier wäre ein Link zum Problem ganz nützlich ...

BlackHawk3 · 29.10.2012

AW: Bilder in Opera Mobile und Co.

Hallo,
es gibt leider keine Onlinevariante davon.
Aber im Prinzip braucht man nur ein Bild das Breiter ist als die Auflösung des Smartphones und das dann in Opera öffnen bzw in FF.