nicht angemeldet
CSS wird vom IE komplett ignoriert
0 
MudGuard
0 0 0 0 
Gunnar Bittersmann
0 0 0 0 0 0 0 0 0 
Marc
0
CSS wird vom IE komplett ignoriert
Hallo zusammen,
habe folgendes Problem: Ich bin dabei, eine Web-Applikation zu schreiben. Habe also HTML- und CSS-Dateien und soweit funktioniert auch alles so wie es soll. Naja, außer im Internet Explorer :-( Verwende die Version 8, aber in Version 7 hat es auch nicht funktioniert. Kann mir einer sagen, wieso er das macht, bzw. was ich im CSS(?) falsch gemacht habe?
Hier mein CSS-Code:
/* CSS für IE, Computer, min-width: 961px */
html {
height: 101%;
} //hatte anstatt html auch schon * probiert, geht aber auch nicht
body {
background: #333;
color: white;
font-family: Helvetica;
font-size: 14px;
margin: 0;
padding: 0;
}
#wrapper {
width: 600px;
margin: auto;
border: #ffcc00 solid 5px;;
}
#kopf {
background: #333;
text-align: center;
text-shadow: 0px 1px 0px #ffcc00;
border-bottom: 1px solid #666;
}
#kopf #img{
background: white url("../images/bild.png") top right no-repeat;
height: 23px;
color: #222;
display: block;
font-size: 20px;
font-weight: bold;
padding: 10px 0;
}
#kopf h2 {
margin-right: 10px;
margin-left: 12px;
font-size: 140%;
}
#navi {
margin-right: 10px;
margin-left: 12px;
}
#navi ul {
list-style: none;
padding: 0;
}
#navi ul li a {
background: #fff;
border: 1px solid #d9d9d9;
color: #222;
display: block;
font-size: 17px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
#navi ul li span {
background: #ddd;
}
#navi ul li a img {
float: right;
}
#navi ul li:first-child a {
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
}
#navi ul li:last-child a {
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
#inhalt img {
border: 1px solid #222;
-webkit-border-radius: 5px;
text-align: center;
}
#inhalt #bild img {
border: 1px solid #222;
-webkit-border-radius: 5px;
text-align: center;
margin: 0;
padding: 0;
}
#inhalt #karte img {
width:273px;
margin: auto;
}
#inhalt {
margin-right: 10px;
margin-left: 12px;
}
#inhalt ul li {
list-style-type: none;
}
#inhalt ul li a {
color: #ffcc00;
text-decoration: none;
}
#liste {
display: none;
border: 1px solid #bbb;
width: 100%;
background: #333;
color: white;
padding: 0 3px 10px 3px;
margin-right: 3px;
}
#liste hr{
color: #333;
}
#inhalt #none{
background: #333;
color: white;
font-weight: bold;
padding: 6px 5px 0 5px;
margin: 0;
}
.button {
width: 120px;
padding: 5px 16px 3px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
position: relative;
font-family: Lucida Sans, Helvetica, sans-serif;
font-weight: 800;
color: #fff;
text-shadow: rgba(10,10,10,0.5) 1px 2px 2px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.aqua {
background-color: #fc0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, 0.9)));
background-image: -moz-linear-gradient(90deg, rgba(108, 191, 255, 0.9) rgba(28, 91, 155, 0.8);
border-top-color: #8ba2c1;
border-right-color: #5890bf;
border-bottom-color: #4f93ca;
border-left-color: #768fa5;
box-shadow: rgba(66,140,240,0.5) 0px 10px 16px;
-webkit-box-shadow: rgba(66,140,240,0.5) 0px 10px 16px;
-moz-box-shadow: rgba(66,140,240,0.5) 0px 10px 16px;
}
#location {
display: none;
}
#footer {
background: #fff;
border-top: 1px solid #666;
color: #222;
display: block;
font-size: 10px;
font-weight: bold;
padding: 50px 0;
text-align: center;
height: 20px;
}
Und meine HTML-Struktur:
<!DOCTYPE html>
<html>
<head>
<title>Titel</title>
<script type="text/javascript" language="JavaScript" src="functions.js">
</script>
<script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.5.1.js">
</script>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 961px)" href="css/computer.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 960px)" href="css/mobile.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen and (min-width: 961px)" href="css/ie.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 960px)" href="css/mobile_ie.css">
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="kopf">
<div id="img"></div>
</div>
<div id="navi">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="inhalt">
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Ich hoffe, mir kann einer von euch weiterhelfen...
Noch was: Gestern hat er es mal für einen "Durchlauf" lang angezeigt. Dann hab ich eine Kleinigkeit im CSS geändert (weiß aber nicht mehr was) und dann ging es nicht mehr - bis jetzt :-(
Danke schon mal für eure Antworten.
LG
it-girl
-
Hi,
/* CSS für IE, Computer, min-width: 961px */
html {
height: 101%;
} //hatte anstatt html auch schon * probiert, geht aber auch nichtKommentare müssen in /\* \*/ eingeschlossen sein, // gibt's in CSS nicht als Kommentar. > > body { Dieser Selector sieht also eigentlich so aus: //hatte anstatt html auch schon \* probiert, geht aber auch nicht body Und der ist wegen dem // kaputt. (die Elementnamen 'hatte', 'anstatt', 'auch' usw. gibt's natürlich auch nicht ...) > ~~~html > <link rel="stylesheet" type="text/css" media="screen and (min-width: 961px)" href="css/computer.css"> > <link rel="stylesheet" type="text/css" media="only screen and (max-width: 960px)" href="css/mobile.css"> > <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> > <!--[if IE]> > <link rel="stylesheet" type="text/css" media="screen and (min-width: 961px)" href="css/ie.css"> > <link rel="stylesheet" type="text/css" media="only screen and (max-width: 960px)" href="css/mobile_ie.css"> > <![endif]--> >kann der IE mit dem media-Zeug so umgehen?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi,
Kommentare müssen in /* */ eingeschlossen sein, // gibt's in CSS nicht als Kommentar.
Sorry, mein Fehler. Das steht nicht so in meiner CSS-Datei, das habe ich nur als Erweiterung zum Code hier eingefügt, damit nicht gleich der erste schreibt "Das muss aber * heißen und nicht html"... Aber hab grad mal den Kommentar in der ersten Zeile mit // probiert und da hat er auch nicht gemeckert (gleichzeitig hab ich das media-Zeug rausgenommen und es lief).
kann der IE mit dem media-Zeug so umgehen?
Ich hab das grad mal rausgenommen und dann hat er es so angezeigt wie er sollte. Aber er hat dann eben nicht mehr nach Auflösung unterschieden. Das Problem ist aber, ich brauch das :-P Es soll nämlich je nach Bildschirmauflösung ein anderes Stylesheet verwendet werden. Man soll es ja auch auf dem Smartphone gut sehen können.
Kann ich das irgendwie "IE-kompatibel" ausdrücken? Auf dem Windows Phone ist ja auch der IE drauf, also brauch ich es eben auch für den IE im "Kleinformat"...LG it-girl
-
Yerf!
Sorry, mein Fehler. Das steht nicht so in meiner CSS-Datei,
Wie sehen die Kommentare *tatsächlich* aus? Ich hab im IE (weiß nicht genau welche Versionen es alles betrifft) einen recht üblen Bug im Zusammenhang mit Umlauten erlebt... am besten nur Ascii in CSS verwenden.
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
Hi!
Wie sehen die Kommentare *tatsächlich* aus?
Hab nur den einen im CSS drin:
/* CSS für IE, Computer, min-width: 961px */
Muss ich daran deiner Erfahrung nach was ändern?LG it-girl
-
Yerf!
Hab nur den einen im CSS drin:
/* CSS für IE, Computer, min-width: 961px */
Muss ich daran deiner Erfahrung nach was ändern?Der Umlaut ist eigentlich weit genug vorne, dass er keinen Ärger machen kann. Selbst wenn der so 6 nachfolgende Zeichen verschwinden lässt wird der Kommentar noch sauber geschlossen.
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung
-
-
@@Harlequin:
nuqneH
Ich hab im IE (weiß nicht genau welche Versionen es alles betrifft) einen recht üblen Bug im Zusammenhang mit Umlauten erlebt...
Kannst du dazu Näheres sagen? Betrifft das heute noch relevante Versionen?
am besten nur Ascii in CSS verwenden.
Nein, kann ich so nicht gelten lassen. Allerdings sollte man die verwendete Zeichencodierung angeben.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hi,
Allerdings sollte man die verwendete Zeichencodierung angeben.
Wie mach ich das im CSS?
LG it-girl
-
Allerdings sollte man die verwendete Zeichencodierung angeben.
Wie mach ich das im CSS?
Suchmaschine deiner Wahl: "Zweichenkodierung im CSS angeben".
Vermutlich einer der ersten Treffer: http://www.w3.org/International/questions/qa-css-charset
-
Suchmaschine deiner Wahl: "Zweichenkodierung im CSS angeben".
Vermutlich einer der ersten Treffer: http://www.w3.org/International/questions/qa-css-charset
Stimmt, sorry, weiß auch nicht, warum ich das gefragt hab ;-)
Danke :-)LG it-girl
-
@@it-girl:
nuqneH
Vermutlich einer der ersten Treffer: http://www.w3.org/International/questions/qa-css-charset
Stimmt, sorry, weiß auch nicht, warum ich das gefragt hab ;-)
Aber schön, dass mal jemand danach gefragt hat. Da weiß ich wenigstens, warum ich das übersetzt hab. ;-)
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Yerf!
Kannst du dazu Näheres sagen? Betrifft das heute noch relevante Versionen?
Das müsst ich nochmal ausgraben, IE6 auf jeden Fall, ich glaub auch den 7er. 8er gabs da noch nicht...
Allerdings sollte man die verwendete Zeichencodierung angeben.
Evtl. lags auch daran und mit korrekter Angabe tritte es dann nicht auf.
Jedenfalls haben Umlaute dazu geführt, dass nachfolgende Zeichen (etwa 6 Stück, genaue Anzahl weiß ich nicht mehr) verschluckt wurden. Wenn der Umlaut am Ende des kommentars steht führt das zu Problemen. Ein
/*für IE*/
führte jedenfalls dazu, dass der IE die nachfolgende Regel ignorierte, das "ü" die nachfolgenden Zeichen inkl. Zeilenumbruch verschluckte.
Wobei ich den wahren Grund erst in JS-Dateien im Debugger gesehen hab, anfangs bei den CSS-Dateien war ich noch recht ratlos, was da genau passiert...
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
Wobei ich den wahren Grund erst in JS-Dateien im Debugger gesehen hab, anfangs bei den CSS-Dateien war ich noch recht ratlos, was da genau passiert...
Dann lag es doch nur am JS? Was stand denn da falsches drin?
LG it-girl
-
Yerf!
Dann lag es doch nur am JS? Was stand denn da falsches drin?
Ähm nein. Aber das "Umlautproblem" existiert auch in JavaScript-Dateien (vermutlich alle externen Ressourcen). Wenn also dort in einem Kommentar Umlaute verwendet werden kann es ebenfalls dazu kommen, das nachfolgende Zeichen ignoriert werden.
Lustig wäre z.B. sowas
// hä?
if (false)
mach(was);Der IE würde (unter gewissen Umständen die ich momentan nicht näher spezifizieren kann) die Funktion mach(was) aufrufen. Denn der eigetlich ausgeführte Code wäre:
// h(false)
mach(was);Wie gesagt das trat damals sowoh in CSS als auch in JS auf. Evtl. lag es aber tatsächlich daran, das keine Codierung für die externen Ressourcen angegeben war.
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
Aber das "Umlautproblem" existiert auch in JavaScript-Dateien (vermutlich alle externen Ressourcen). Wenn also dort in einem Kommentar Umlaute verwendet werden kann es ebenfalls dazu kommen, das nachfolgende Zeichen ignoriert werden.
Ist das jetzt auch noch so? Denn ich habe auch ein JS-Datei mit vielen Umlauten in den Kommentaren und bei mir geht alles und ich hab auch keine Codierung angegeben.
Das Einzige, was nicht richtig geklappt hat, war die Ausgabe einer alert-Box. Da kam anstatt der Umlaute ein anderes Zeichen (schwarze Raute mit Fragezeichen drin, glaub ich). Das hab ich dann mit unescape() gelöst:
alert(unescape("Achtung! " + plz + " ist keine g%FCltige PLZ!"));(%FC anstatt ü)LG it-girl
PS: Jaja, ich weiß, wir schweifen vom eigentlichen Thema ab ;-)
-
Yerf!
Ich kanns leider nicht genau sagen, bin n bissl raus aus der Thematik und der Fall is schon n bissl her... Ich denk mal, wenn man die Codierung richtig angibt sollte alles ok sein.
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung
-
-
-
-
-
-
-
Es soll nämlich je nach Bildschirmauflösung ein anderes Stylesheet verwendet werden.
Welche Relevanz besitzt die Bildschirmauflösung für die Darstellung?
Ich würde mich eher an die Viewportgröße halten.
-
Hi,
Welche Relevanz besitzt die Bildschirmauflösung für die Darstellung?
Naja, da es eine Web-App werden soll und ich möchte, dass sie auf allen Geräten, also PC und Phone, schön angezeigt wird, muss ich das schon unterscheiden können. Im Moment hab ich für alle noch ein ziemlich ähnliches Desgin, aber das soll sich noch etwas ändern.
Ich würde mich eher an die Viewportgröße halten.
Und wie mach ich das? Also wie kann ich die ansprechen?
Danke und LG
it-girl-
Welche Relevanz besitzt die Bildschirmauflösung für die Darstellung?
Naja, da es eine Web-App werden soll und ich möchte, dass sie auf allen Geräten, also PC und Phone, schön angezeigt wird, muss ich das schon unterscheiden können. Im Moment hab ich für alle noch ein ziemlich ähnliches Desgin, aber das soll sich noch etwas ändern.
Das dachte ich bereits - dennoch hat der Bildschrim nicht viel mit der Viewportgröße zu tun - besonders nicht auf Mobiltelefonen da hier auch die Pixel-Dimensionen des Anzeigegeräts nicht viel mit der Größe des Anzeigebereichs zu tun haben, da hier oft mit "halben Pixeln" arbeiten - Webkit stellt hier z.B. -webkit(-(min|max))?device-pixel-ratio zur Verfügung.
Ich würde mich eher an die Viewportgröße halten.
Und wie mach ich das? Also wie kann ich die ansprechen?
Media Queries nutzt du ja schon - interessant ist vor allem width und height, device-width und device-height hingegen ist mit Media Queries zwar abfragbar, aber praktisch eher für die Standarddarstellum in Viewport weniger interssant.
In Summe ist dein Vorhaben allerdings allgemein eher unsinnig - die meisten am Markt befindlichen Mobilgeräte haben einen Browser der herkömmliche Desktop-Seiten ordentlich darstellen kann - ich würde mich also eher darauf beschränken, die Geschwindikeit zu optimieren als ein "zweites" Stylesheet zu schreiben.
-
Das dachte ich bereits - dennoch hat der Bildschrim nicht viel mit der Viewportgröße zu tun - besonders nicht auf Mobiltelefonen da hier auch die Pixel-Dimensionen des Anzeigegeräts nicht viel mit der Größe des Anzeigebereichs zu tun haben, da hier oft mit "halben Pixeln" arbeiten - Webkit stellt hier z.B. -webkit(-(min|max))?device-pixel-ratio zur Verfügung.
Was bewirkt das denn? Und wie/wo verwende ich das?
Ich würde mich eher an die Viewportgröße halten.
Und wie mach ich das? Also wie kann ich die ansprechen?
Media Queries nutzt du ja schon - interessant ist vor allem width und height, device-width und device-height hingegen ist mit Media Queries zwar abfragbar, aber praktisch eher für die Standarddarstellum in Viewport weniger interssant.
Also ich hab ja auch schon was mit dem viewport drinstehen:
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
Ist das das, was du meinst? Oder wie kann ich das (besser) machen?In Summe ist dein Vorhaben allerdings allgemein eher unsinnig - die meisten am Markt befindlichen Mobilgeräte haben einen Browser der herkömmliche Desktop-Seiten ordentlich darstellen kann - ich würde mich also eher darauf beschränken, die Geschwindikeit zu optimieren als ein "zweites" Stylesheet zu schreiben.
Muss ich dazu nochmal extra was angeben, dass die das machen, oder machen die das schon von sich aus?
LG it-girl
-
Was bewirkt das denn? Und wie/wo verwende ich das?
Wie man eine Suchmaschine bedient weißt du?
Also ich hab ja auch schon was mit dem viewport drinstehen:
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Weißt du auch was diese Sachen tun und welche Browser welcher Mobilgeräte sie verstehen und nutzen?
Oder wie kann ich das (besser) machen?
Indem du spezifizierst, was du machen möchtest - es gibt momentan etwa 4 relevante Browser für Mobilgeräte. Unter iOS gibt es Safari und unter Android gibt es "Den Browser der irgendwie wie Chrome ist aber doch nicht ganz aber je nach Mobilfunkanbieter anders heisst", Opera und Firefox.
Alle anderen Browser sind aktuell eher weniger Interssant - aber die genannten vier sind durchaus in der Lage herkömmliche Seiten ohne irgendwelche Handstände hinsichtlich Media Queries anzuzeigen.
Muss ich dazu nochmal extra was angeben, dass die das machen, oder machen die das schon von sich aus?
Verlangst du Geld dafür, irgend eine Website für Mobilgeräte tauglich zu machen oder ist das dein Freizeitvergnügen?
-
Wie man eine Suchmaschine bedient weißt du?
Ja das weiß ich... hatte nur gedacht, dass es etwas schneller geht, wenn das kurz einer erklären kann, der das weiß, anstatt dass ich jetzt erst mal wieder stundenlang bei Google rumsuche...
Also ich hab ja auch schon was mit dem viewport drinstehen:
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Weißt du auch was diese Sachen tun und welche Browser welcher Mobilgeräte sie verstehen und nutzen?
Ja, und zwar bewirkt diese Zeile, dass die Seite/App genau so breit dargestellt wird, wie der Bildschirm breit ist und man keinen horizontalen Scrollbalken braucht. Die Zeile wird von allen nicht-mobilen Browsern ignoriert. Lasse ich sie aber weg, wird auf einem Smartphone (egal welches) die komplette Breite der Seite/App angezeigt, was natürlich alles viel kleiner erscheinen lässt und nicht gerade benutzerfreundlich ist.
Oder wie kann ich das (besser) machen?
Indem du spezifizierst, was du machen möchtest - es gibt momentan etwa 4 relevante Browser für Mobilgeräte. Unter iOS gibt es Safari und unter Android gibt es "Den Browser der irgendwie wie Chrome ist aber doch nicht ganz aber je nach Mobilfunkanbieter anders heisst", Opera und Firefox.
Da ich oben ja schon gesagt habe, dass die Breite unterschiedlich ist, muss ja auch evtl. an manchen Stellen das Layout angepasst werden, damit es gut lesbar und bedienbar ist. Usability sagt dir was? Und das soll dann eben auch auf allen Smartphones gehen, also wenn möglich auch auf dem Windows Phone, das ja den IE benutzt. Und da liegt im Moment das Problem. Der IE mag die Media Queries nicht. Aber wie kann ich das sonst machen?
Meintest du das mit "spezifizieren"?Alle anderen Browser sind aktuell eher weniger Interssant - aber die genannten vier sind durchaus in der Lage herkömmliche Seiten ohne irgendwelche Handstände hinsichtlich Media Queries anzuzeigen.
Verlangst du Geld dafür, irgend eine Website für Mobilgeräte tauglich zu machen oder ist das dein Freizeitvergnügen?
Nein, ich verlange kein Geld dafür. Warum fragst du? :-)
LG it-girl
-
Wie man eine Suchmaschine bedient weißt du?
Ja das weiß ich... hatte nur gedacht, dass es etwas schneller geht, wenn das kurz einer erklären kann, der das weiß, anstatt dass ich jetzt erst mal wieder stundenlang bei Google rumsuche...
Es ist kein triviales Thema und grade jetzt besonders im Fluss, weil ständig neue Mobilgeräte mit irgndwelchen "Erfindungen" auf den Markt kommen.
Also ich hab ja auch schon was mit dem viewport drinstehen:
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />Weißt du auch was diese Sachen tun und welche Browser welcher Mobilgeräte sie verstehen und nutzen?
Ja, und zwar bewirkt diese Zeile, dass die Seite/App genau so breit dargestellt wird, wie der Bildschirm breit ist und man keinen horizontalen Scrollbalken braucht. Die Zeile wird von allen nicht-mobilen Browsern ignoriert. Lasse ich sie aber weg, wird auf einem Smartphone (egal welches) die komplette Breite der Seite/App angezeigt, was natürlich alles viel kleiner erscheinen lässt und nicht gerade benutzerfreundlich ist.
Mit anderen Worten: für einen Tablet-Benutzer wäre das sicher noch ok, für jemanden mit einem Mobiltelefon mit kleinem Display (nein, kein Smartphone mit 800x480 oder ähnliches) und Opera Mini würde das bedeuten, dass man deine Site nicht mehr bedienen kann weil "unzoombar" - man müsste erst über das Menü das Renderverhalten auf Small-Screen-Rendering umstellen und deine CSS-Angaben völlig ignorieren.
Oder wie kann ich das (besser) machen?
Indem du spezifizierst, was du machen möchtest - es gibt momentan etwa 4 relevante Browser für Mobilgeräte. Unter iOS gibt es Safari und unter Android gibt es "Den Browser der irgendwie wie Chrome ist aber doch nicht ganz aber je nach Mobilfunkanbieter anders heisst", Opera und Firefox.
Da ich oben ja schon gesagt habe, dass die Breite unterschiedlich ist, muss ja auch evtl. an manchen Stellen das Layout angepasst werden, damit es gut lesbar und bedienbar ist.
Warum?
Usability sagt dir was?
Ja - und mir geht es absolut auf den Senkel, wenn mir jemand vorschreibt wie und in welcher Größe ich eine Website ansehen muss - und besonders dann, wenn sie auf meinem Mobilgerät völlig anders aussieht wie auf meinem Tablet oder wenn ich das Browserfenster verkleinere sich plötzlich das Layout völlig verändert - das hat nichts mit Usability zu tun sondern eher etwas mit Besucher vergraulen.
Und das soll dann eben auch auf allen Smartphones gehen, also wenn möglich auch auf dem Windows Phone, das ja den IE benutzt.
Ja, irgend einen dreckigen IE7-Mist den man nicht als Browser bezeichnen kann - aber zoomen kann er - der Marktanteil ist am Smartphonesegemnt bei etwa 2 bis 3 % - das ist momentan vernachlässigbar. Wichtig sind Android, iOS und Symbian mit den genannten Browsern.
Und da liegt im Moment das Problem. Der IE mag die Media Queries nicht. Aber wie kann ich das sonst machen?
Lass die Site wie sie ist und Sorge dafür dass sie wenig komplexität aufweist und schnell geladen wird - ich wiederhole mich ungern.
Meintest du das mit "spezifizieren"?
Nein, du hast im Grunde genommen lediglich wiederholt, dass die Site auf "allen Mobilgeräten" gut aussehen soll obowohl du noch nichtmal deine Zielgruppe kennst und für welche Geräte und Browser du überhaupt optimieren musst. Vielleicht haben bei dir ja die Windows-Phone-7-Benutzer einen höheren Anteil?
Nein, ich verlange kein Geld dafür. Warum fragst du? :-)
Wenn man Geld verlangt, sind idR. ein paarhundert Euro für einige Testgeräte eine gute investition. Nagelneue Android-Smartphones wo du vier der verbreitesten Browser testen kannst bekommst du nagelneu ohne Vertrag ab etwa 150 Euro.
-
Es ist kein triviales Thema und grade jetzt besonders im Fluss, weil ständig neue Mobilgeräte mit irgndwelchen "Erfindungen" auf den Markt kommen.
Ja ok, das seh ich ein...
Mit anderen Worten: für einen Tablet-Benutzer wäre das sicher noch ok, für jemanden mit einem Mobiltelefon mit kleinem Display (nein, kein Smartphone mit 800x480 oder ähnliches) und Opera Mini würde das bedeuten, dass man deine Site nicht mehr bedienen kann weil "unzoombar" - man müsste erst über das Menü das Renderverhalten auf Small-Screen-Rendering umstellen und deine CSS-Angaben völlig ignorieren.
Das "unzoombar" liegt daran oder?
content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"Aber dascontent="width=device-width"ist ok?
Ich muss dazu sagen, dass ich die Zeile aus einem HTML5-Buch habe und da steht eben nur das mit der Breite als Erklärung dabei und nicht, dass es dadurch unzoombar wird... Ist wohl kein so ein gutes Buch :-(Da ich oben ja schon gesagt habe, dass die Breite unterschiedlich ist, muss ja auch evtl. an manchen Stellen das Layout angepasst werden, damit es gut lesbar und bedienbar ist.
Warum?
Es soll ja nicht nur funktionieren, sondern auch gut aussehen :-) Sonst könnte ich die Stylesheets ja gleich weglassen...
Ja - und mir geht es absolut auf den Senkel, wenn mir jemand vorschreibt wie und in welcher Größe ich eine Website ansehen muss - und besonders dann, wenn sie auf meinem Mobilgerät völlig anders aussieht wie auf meinem Tablet oder wenn ich das Browserfenster verkleinere sich plötzlich das Layout völlig verändert - das hat nichts mit Usability zu tun sondern eher etwas mit Besucher vergraulen.
Ok, ja da hast du Recht, das ist wohl sehr verwirrend für die Benutzer. Ich denke, ich sollte da eher eine Abfrage machen, ob es ein iPhone/iPad/Android etc. ist und dafür dann ein anderes Layout machen. Ist das besser? :-)
Ja, irgend einen dreckigen IE7-Mist den man nicht als Browser bezeichnen kann - aber zoomen kann er - der Marktanteil ist am Smartphonesegemnt bei etwa 2 bis 3 % - das ist momentan vernachlässigbar. Wichtig sind Android, iOS und Symbian mit den genannten Browsern.
Gut, dann lass ich das mit dem IE erst mal und versuch den Rest hinzubekommen. Und wenn dann noch Zeit und Lust ist, mach ich das noch für den IE :-)
Lass die Site wie sie ist und Sorge dafür dass sie wenig komplexität aufweist und schnell geladen wird - ich wiederhole mich ungern.
Ist ja gut :-)
Nein, du hast im Grunde genommen lediglich wiederholt, dass die Site auf "allen Mobilgeräten" gut aussehen soll obowohl du noch nichtmal deine Zielgruppe kennst und für welche Geräte und Browser du überhaupt optimieren musst. Vielleicht haben bei dir ja die Windows-Phone-7-Benutzer einen höheren Anteil?
Naja, also die Zielgruppe sollen Smartphonebenutzer sein :-)
Und da du gesagt hast, dass Firefox, Opera, Safari und das Chrome-ähnliche Dingens im Moment ganz oben sind, werde ich wohl dafür optimieren.
Ich weiß nicht, ob von den Benutzern so viele ein WP7 haben, aber ich hätte jemanden, der das Ding hat, auf dem ich es testen könnte. Aber das reicht wahrscheinlich nicht als Argument, oder? ;-)Wenn man Geld verlangt, sind idR. ein paarhundert Euro für einige Testgeräte eine gute investition. Nagelneue Android-Smartphones wo du vier der verbreitesten Browser testen kannst bekommst du nagelneu ohne Vertrag ab etwa 150 Euro.
Ja, vor allem wenn man mehr als nur eine App entwickelt.
Klingt ja fast so, als wolltest du mir jetzt eins verkaufen ;-)Danke, dass du mein Vorhaben so hinterfragst. Einige Dinge wären mir sonst gar nicht so klar geworden :-)
LG it-girl
-
Das "unzoombar" liegt daran oder?
content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"Aber dascontent="width=device-width"ist ok?
Ich muss dazu sagen, dass ich die Zeile aus einem HTML5-Buch habe und da steht eben nur das mit der Breite als Erklärung dabei und nicht, dass es dadurch unzoombar wird... Ist wohl kein so ein gutes Buch :-(Es wird auch nicht "unzoombar" - der iOS Safari am iPad oder am iPhone ignoriert die Angabe z.B. schlichtweg - es sind ohnehin nur Empfehlungen. Wo kämen wir da hin, wenn mir die Website sagt, ob ich Zoomen darf oder nicht?
Es soll ja nicht nur funktionieren, sondern auch gut aussehen :-) Sonst könnte ich die Stylesheets ja gleich weglassen...
Dann sorge dafür, dass die Dokumente in einem "normalen Browser" gut aussehen, auf mobilgeräten sehen die idR. dann auch gut aus.
Ok, ja da hast du Recht, das ist wohl sehr verwirrend für die Benutzer. Ich denke, ich sollte da eher eine Abfrage machen, ob es ein iPhone/iPad/Android etc. ist und dafür dann ein anderes Layout machen. Ist das besser? :-)
Nein - warum? Das ganz gewöhnliche Layout der Site reicht völlig aus - essentiell ist nur, dass es wenig komplex ist und schnell gerendert und geladen werden kann - den Rest kann man problemlos mit einem Modernen Mobilbrowser erledigen.
Naja, also die Zielgruppe sollen Smartphonebenutzer sein :-)
Warum baust du die Website dann überhaupt für Desktop-Browser? :p
Aber das reicht wahrscheinlich nicht als Argument, oder? ;-)
Wenn der deine Site sowieso nicht besucht, ist das unnötige Arbeit.
Ja, vor allem wenn man mehr als nur eine App entwickelt.
Apps sind überbewertet - Benutzer schauen sich Webseiten im Browser an - eine "App" bedeutet unglaublichen Entwicklugnsaufwand für nix. Wenn ich News von einer Seite will, nehm ich den RSS-Feed und häng ihn in den Browser und nicht die "News-App" wo ich nicht weiß, was die sonst noch mit meinem Betriebssystem macht und es zusätzlich noch arg belastet.
Klingt ja fast so, als wolltest du mir jetzt eins verkaufen ;-)
Ich nicht, aber Hofer/Aldi:
http://www.hofer.at/at/html/offers/58_22522.htmBei eBay geht das Ding ab und zu für rund 75 bis 100 Euro weg - wenn du also ernsthaft was zu testen suchst, schaff dir so ein Ding an.
Es muss nicht unbedingt ein 700-Euro-iPhone sein.
-
-
Hallo suite,
Usability sagt dir was?
Ja - und mir geht es absolut auf den Senkel, wenn mir jemand vorschreibt wie und in welcher Größe ich eine Website ansehen muss - und besonders dann, wenn sie auf meinem Mobilgerät völlig anders aussieht wie auf meinem Tablet oder wenn ich das Browserfenster verkleinere sich plötzlich das Layout völlig verändert - das hat nichts mit Usability zu tun sondern eher etwas mit Besucher vergraulen.
Oh danke! Danke! Danke, Danke, Danke!!!
mercedes-benz.com erlaubt mir auf dem iPad gerade mal 4 verschiedene Autos anzusehen - aber keine Details... aber das ist nur die traurige Spitze des Eisbergs...
Vielleicht verkaufen die auch nichts an iPad-Nutzer. Die fahren sicher alle Audi. :-)
Viele Grüße,
Marc.
-
-
-
-
-
'ǝɯɐu$ ıɥ
In Summe ist dein Vorhaben allerdings allgemein eher unsinnig - die meisten am Markt befindlichen Mobilgeräte haben einen Browser der herkömmliche Desktop-Seiten ordentlich darstellen kann
Das glaub ich nicht Tim...
SCNR
ssnɹƃ
ʍopɐɥs--
“A computer lets you make more mistakes faster than any invention in human history–with the possible exceptions of handguns and tequila.”
- Mitch Radcliffe
-
-
-
-
-