Viewport

Invader

Ensign
Registriert
März 2015
Beiträge
148
Hallo,

das ist zwar kein Programmierproblem aber wenn es ok ist poste ich es trotzdem hier, vl kann mir ja wer helfen.

Ich will $(".responsive-slider").width(); cross plattform und crossbrowser rausfinden. Das funktioniert nicht richtig.

Bei meinem Xperia Z1 + Android 5.02 + Firefox bekomm ich einen anderen value (falschen value) als am PC

Sobald ich das // alert("ww"); unten einblende bekomme ich den richtigen value.

Bitte nicht vorschlagen px statt % zu verwenden, denn das ist keine option ;).

Weiß jemand woran es liegt? Hat wer eine Lösung?

Danke vielmals!

Code:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
   	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>a</title>
    
    <style type="text/css">
        html,body
        {	
          	height: 100%;
         	margin: 0;
          	padding: 0;
		overflow-x:hidden;
		overflow-y:hidden;
        }
        .container {
            position: absolute;
            top: 0; bottom: 0; left: 0;right: 0;
            margin: auto;
	    z-index:1;
        }
		.responsive-slider {
			position: relative;
			margin:0 auto;
			overflow:hidden;
			float:left;
			width:80%;
                        height:100%;
		}

		#slider-control-div-right, #slider-control-div-left {
			float:left;
			position:relative;
			height:100%;
			width:10%;
		}
    </style>
    
</head>
<body>
	<div class="container">
    	<div id="slider-control-div-left">
        </div>
        <div class="responsive-slider">
        </div>
        <div id="slider-control-div-right">
        </div>
	</div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>

    <script type="text/javascript">	
        $(window).load(function() {
			// alert("ww");
			var sliderWidth = $(".responsive-slider").width();
			alert(sliderWidth);
			$(".content").css("width", sliderWidth);
			
        });
    </script>
</body>
</html>
 
Zuletzt bearbeitet:
Wie verhält sich das ganze, wenn du statt dessen auf $(".responsive-slider").outerWidth() zugreifst? Mit width() hatte ich auch schon häufiger kleine Probleme, die outerWidth lösen konnte.

Außerdem: Ist <div class="responsive-slider"> wirklich leer? Da muss man auch aufpassen. Gerade wenn man über JS die Dimensionen von <img> ermitteln will, kann es hier zu Komplikationen kommen. Manche Browser (z.T. auch Chrome Desktop) geben da gern mal ne 0 zurück, wenn das Bild noch nicht vollständig geladen wurde.
 
es ist wirklich egal ob ich outerWidth(), innerHeight(), availWidth usw verwende um mein responsive layout aufzubauen, alle sind buggy bei android. Ich will ein Problem lösen und probiers jetzt mit width.

"Außerdem: Ist <div class="responsive-slider"> wirklich leer? Da muss man auch aufpassen. Gerade wenn man über JS die Dimensionen von <img> ermitteln will, kann es hier zu Komplikationen kommen. Manche Browser (z.T. auch Chrome Desktop) geben da gern mal ne 0 zurück, wenn das Bild noch nicht vollständig geladen wurde. "

Was hat das damit zutun? Wo will ich Dimensionen von img ermitteln?
 
Invader schrieb:
Was hat das damit zutun? Wo will ich Dimensionen von img ermitteln?
Chrome buggt rum, wenn du die Maße von Containern ermitteln willst, in denen Bilder enthalten sind, welche noch nicht geladen wurden. Als Ergebnis bekommst du dann immer die Maße des Containers ohne Bilder (im schlimmsten Fall ergo ne glatte Null). Alle Browser haben damit keine Probleme (so weit mir bekannt ist; Firefox, IE, Opera 12.x), beim OnDomReady Event die korrekten Maße zu liefern. Bei Chrome musst du da mit dem OnLoad Event arbeiten, sodass die Bilder auch die korrekten Maße beinhalten, sodass deine Container entsprechend korrekt gesetzt werden können.

Nachteil an der Geschichte: OnDomLoad kann je nach Content ziemlich lange dauern.

Alternative Lösung: Die Maße den img-Tags mitgeben, dann macht Chrome im OnDomReady alles richtig.
 
Oder man verwendet eine passendes jQuery-Plugin, das ein "ImageReady"-Event für einzelne Bilder bereit stellt. Das liegt dann zeitlich eher an DomReady als an DomLoad.

Aber mal ganz schlicht gefragt: Warum eigentlich das Rad neu erfinden? Es gibt allerhand freie Responsive Slider, die perfekte Crossbrowser-Kompatibilität mitbringen.
 
keine Ahnung warum ihr wieder damit anfangt. Was bitte hat CHrome und img mit meinem Problem zutun? sry...

@Daaron: Es gibts keinen Slider der das kann was ich vorhabe ;)

screen.width erkennt zB auch jeder Browser bei Android anders. Manche geben die Screen Res / Pixelratio aus und manche nur screen res. Das Problem ist Android ist absolut verbuggt was devolping angeht. Kennt jemand einen Workaround?
 
Zuletzt bearbeitet:
Warts nur ab, bis du das erste mal auf einen von den 1000 iOS-Safari-Bugs stößt, dann wünschst du dir solche Android-Kleinigkeiten zurück.
 
Zurück
Oben