zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Webseite für Smartphones Optimieren.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 23.07.2011, 03:03
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard Webseite für Smartphones Optimieren.

Hallo =)

Ich habe mir vorgenommen meine Webseite: (http://homebrew-genius.de) auch für Smartphone User ansehlich zu machen.

Habe dann im internet eine simple Lösung gefunden, und zwar den CSS Code kopieren und 2 mal in die CSS file kopieren, jeweils einmal in:

Für Computer:
Code:
@media only screen and (min-device-width: 800px) {
/* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */
}
Für Handys:
Code:
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */
}
Nun habe ich im Code der im Handy Container ist mal den Background ausm Body rausgelöscht... der war dann auf meinem Smartphone tatsächlich nicht mehr sichtbar aber...

wenn ich den wieder einfüge in dem container kommt er auch nicht wieder oO und die Marginwerte werden auch Ignoriert...

Habe es Resettet auf 0 aber trotzdem ist auf dem Smartphone plötzlich ein Rand um die Webseite...

Und als ich dann im Header die Hintergrundgrafik gelöscht habe und keine veränderung auf dem Smartphone festestellen konnte, dachte ich mir ich frage hier mal nach

Hat einer eine Idee woran das liegen könnte?

Gruß Sven
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.07.2011, 16:05
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

weis echt keiner wie sowas geht? ...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.07.2011, 16:13
$("#mettbröttchen");
XHTMLforum-Mitglied
 
Registriert seit: 28.09.2010
Ort: Bremen
Beiträge: 448
zeji wird schon bald berühmt werden
Standard

Auf deiner Seite sehe ich nichts davon, dass du mit media-queries gearbeitet hast ....

installier mal firebug und zieh dein Browserfenster auf iphonegröße. Dann untersuch mal, welches Stylesheet gerade auf die jeweiligen elemente wirkt...

Geändert von zeji (25.07.2011 um 16:16 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 25.07.2011, 18:34
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

ja weil ich die alte css wieder reingemacht habe da die mit smartphone support nur fehler verursacht hatte...
Mit Zitat antworten
  #5 (permalink)  
Alt 25.07.2011, 19:18
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Also habe jetzt nochmal ausprobiert:

Code:
body {
	margin: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	background: url(../images/bg_contet.png) repeat-x scroll center 260px #759d20;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */
body {
	background: #FFF;
}
}
wenn ich jetzt kleiner mache das fenster sollte sich ja der body background un Weiß ändern... tut er aber leider nicht =/
Mit Zitat antworten
  #6 (permalink)  
Alt 25.07.2011, 19:28
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.823
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Weil sich device-width, wie der Name sagt, auf die Breite des Anzeigegeräts bezieht und nicht auf die Breite des Anzeigebereichs.

Das ist für den Anwendungsfall natürlich sinnvoll, lässt dich aber das Stylesheets nicht so testen wie du willst.
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
  #7 (permalink)  
Alt 25.07.2011, 19:47
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

Also ich habe es jetzt Hinbekommen teilweise....
Nun funktioniert es auch im Mozilla Browser am PC,
wenn ich Browser fenster kleiner mache als 800 verändert sich das design soffort...

Seltsam ist nur das mein kumpel die seite mit seinem IPhone 3GS betrachtet hat und seltsamer weise das PC Design dargestellt bekommt...
Sein Handy hat eine Bildschrim breite von 480 und ich glaube 480 ist definitig kleiner als 800 Woran liegt das?
Einer eine idee? Habe vor das Design noch für Smartphones mit bildschrimbreite von 480 um zu setzen da doch noch einige leute handys mit der Breite haben...

Header:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/smartphone_800.css" />
<title>Homebrew-Genius: Xbox 360</title>

</head>

<body>
<!--HEADER START -->
<div class="header_bg">
<div class="header_gfx">
	
	<!--NAVIGATION START -->
	<div class="header_warper">
		<div class="button_home_01"><a class="button_home_1" href="index.php"></a></div>
		<div class="button_tutorials_01"><a class="button_tutorials_1" href="tutorials.php"></a></div>
		<div class="button_downloads_01"><a class="button_downloads_1" href="downloads.php"></a></div>
		<div class="button_faq_01"><a class="button_faq_1" href="faq.php"></a></div>
		<div class="button_partner_01"><a class="button_partner_1" href="partner.php"></a></div>
		<div class="button_kontakt_01"><a class="button_kontakt_1" href="kontakt.php"></a></div>
		<div class="button_impressum_01"><a class="button_impressum_1" href="impressum.php"></a></div>
	</div>
	<!--NAVIGATION ENDE -->
    
</div>
</div>
<!--HEADER ENDE -->
style.css:
Code:
@charset "utf-8";
/* CSS Document */

body {
	margin: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 10pt;
	background: url(../images/bg_content.png) repeat-x scroll center 260px #759d20;
}

h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
fieldset, form, label, legend,
caption, tbody, tfoot, thead {
    margin: 0;
    padding: 0;
    border: 0;
}

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:hover {color: FFFFFF; text-decoration: underline}

div.clear {
	clear: both;
}

div.header_warper {
	padding-top: 210px;
	width: 940px;
	height: 50px;
	margin: auto;
}

div.header_bg {
	background: url(../images/header_bg.png) center;
	height:276px;
}

div.header_gfx {
	background: url(../images/header.png) center;
	height:276px;
}

div.button_home_01{height: 50px; width: 96px; float: left;}
.button_home_1 {width: 96px; height: 50px; float: left; background: url("../images/button_home.png") 0 0 no-repeat;}
.button_home_1:hover {background-position: -96px 0;}

div.button_tutorials_01{height: 50px; width: 134px; float: left;}
.button_tutorials_1 {width: 134px; height: 50px; float: left; background: url("../images/button_tutorials.png") 0 0 no-repeat;}
.button_tutorials_1:hover {background-position: -134px 0;}

div.button_downloads_01{height: 50px; width: 171px; float: left;}
.button_downloads_1 {width: 171px; height: 50px; float: left; background: url("../images/button_downloads.png") 0 0 no-repeat;}
.button_downloads_1:hover {background-position: -171px 0;}

div.button_faq_01{height: 50px; width: 74px; float: left;}
.button_faq_1 {width: 74px; height: 50px; float: left; background: url("../images/button_faq.png") 0 0 no-repeat;}
.button_faq_1:hover {background-position: -74px 0;}

div.button_partner_01{height: 50px; width: 114px; float: left;}
.button_partner_1 {width: 114px; height: 50px; float: left; background: url("../images/button_partner.png") 0 0 no-repeat;}
.button_partner_1:hover {background-position: -114px 0;}

div.button_kontakt_01{height: 50px; width: 121px; margin-left: 70px; float: left;}
.button_kontakt_1 {width: 121px; height: 50px; float: left; background: url("../images/button_kontakt.png") 0 0 no-repeat;}
.button_kontakt_1:hover {background-position: -121px 0;}

div.button_impressum_01{height: 50px; width: 160px; float: left;}
.button_impressum_1 {width: 160px; height: 50px; float: left; background: url("../images/button_impressum.png") 0 0 no-repeat;}
.button_impressum_1:hover {background-position: -160px 0;}

div.global_warper {
	margin: auto;
	width: 940px;
	padding-top: 30px;
}

div.tut_navi_warper {
	width: 250px;
	margin-right: 10px;
	float: left;
}

div.tut_navi_top {
	width: 250px;
	height: 18px;
	background-image: url(../images/content_bgs/tut_navi_top.png);
}

div.tut_navi_middle {
	width: 214px;
	background-image: url(../images/content_bgs/tut_navi_middle.png);
	padding: 0 18px;
	color: #646464;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	line-height: 1.5em;
}

div.tut_navi_middle a:link {color: #5c8020}
div.tut_navi_middle a:visited {color: #5c8020}
div.tut_navi_middle a:hover {color: #465d1f}

div.tut_navi_bottom {
	width: 250px;
	height: 18px;
	background-image: url(../images/content_bgs/tut_navi_bottom.png);
}

span.tut_navi_nrs {
	margin-right:0.6em;
}

div.tut_textarea_warper {
	width: 680px;
	float: left;
}

div.tut_textarea_top {
	width: 680px;
	height: 18px;
	background-image: url(../images/content_bgs/tut_textarea_top.png);
}

div.tut_textarea_middle {
	width: 644px;
	background-image: url(../images/content_bgs/tut_textarea_middle.png);
	padding: 0px 18px 0px 18px;
}

div.tut_textarea_bottom {
	width: 680px;
	height: 18px;
	background-image: url(../images/content_bgs/tut_textarea_bottom.png);
}

div.textarea_warper {
	width: 940px;
	margin: auto;
}

div.textarea_top {
	width: 940px;
	height: 18px;
	background-image: url(../images/content_bgs/textarea_top.png);
}

div.textarea_middle {
	width: 900px;
	background-image: url(../images/content_bgs/textarea_middle.png);
	padding: 0px 20px;
}

div.textarea_bottom {
	width: 940px;
	height: 18px;
	background-image: url(../images/content_bgs/textarea_bottom.png);
}

div.kontaktsidetext_warper {
	width: 420px;
	margin: auto;
	float: left;
}

div.kontaktsidetext_top {
	width: 420px;
	height: 18px;
	background-image: url(../images/content_bgs/kontaktsidetext_top.png);
}

div.kontaktsidetext_middle {
	width: 380px;
	background-image: url(../images/content_bgs/kontaktsidetext_middle.png);
	padding: 0px 20px;
}

div.kontaktsidetext_bottom {
	width: 420px;
	height: 18px;
	background-image: url(../images/content_bgs/kontaktsidetext_bottom.png);
}

div.impressum_bg {
	width: 900px;
	background-image: url(../images/impressum_bg.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

div.impressum_icon {
	width: 870px;
	height: 105px;
	background-image: url(../images/impressum_icon.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}

div.impressum_anschrifft1 {
	width: 200px;
	margin-right: 20px;
	float: left;
	text-align: right;
}

div.impressum_anschrifft2 {
	width: 280px;
	float: left;
}

div.impressum_upperwarper {
	margin-top: 10px;
}

/* KONTAKT FORMULAR */
div.kontaktform_text {
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

div.kontaktform_text2 {
	float: left;
	margin-bottom: 5px;
}

div.kontakt_textarea_warper {
	width: 520px;
	margin: auto;
	float: left;
}

div.kontakt_textarea_top {
	width: 520px;
	height: 18px;
	background-image: url(../images/content_bgs/kontakt_textarea_top.png);
}

div.kontakt_textarea_middle {
	width: 480px;
	background-image: url(../images/content_bgs/kontakt_textarea_middle.png);
	padding: 0px 20px;
}

div.kontakt_textarea_bottom {
	width: 520px;
	height: 18px;
	background-image: url(../images/content_bgs/kontakt_textarea_bottom.png);
}

div.kontakt_userdaten {
	padding-left: 10px;
	width: 270px;
	float: left;
}

/* PARTNER */
div.button_follow_01{height: 176px; width: 100px; float: left;}
.button_follow_1 {width: 100px; height: 176px; float: left; background: url("../images/followlink.png") 0 0 no-repeat;}
.button_follow_1:hover {background-position: -100px 0;}
smartphone_800.css
Code:
/* 480x800 ----------- */
@media (max-width :800px) {
body {
	background: #eeecee;
}

div.header_warper {
	width: 800px;
}

div.header_bg {
	background: url(../images/smartphones/800/header_bg.png) center;
}

div.header_gfx {
	background: url(../images/smartphones/800/header.png) center;
}

div.button_home_01{height: 50px; width: 118px; float: left;}
.button_home_1 {width: 118px; height: 50px; float: left; background: url("../images/smartphones/800/button_home.png") 0 0 no-repeat;}
.button_home_1:hover {background-position: 0;}

div.button_tutorials_01{height: 50px; width: 116px; float: left;}
.button_tutorials_1 {width: 116px; height: 50px; float: left; background: url("../images/smartphones/800/button_tutorials.png") 0 0 no-repeat;}
.button_tutorials_1:hover {background-position: 0;}

div.button_downloads_01{height: 50px; width: 137px; float: left;}
.button_downloads_1 {width: 137px; height: 50px; float: left; background: url("../images/smartphones/800/button_downloads.png") 0 0 no-repeat;}
.button_downloads_1:hover {background-position: 0;}

div.button_faq_01{height: 50px; width: 62px; float: left;}
.button_faq_1 {width: 62px; height: 50px; float: left; background: url("../images/smartphones/800/button_faq.png") 0 0 no-repeat;}
.button_faq_1:hover {background-position: 0;}

div.button_partner_01{height: 50px; width: 99px; float: left;}
.button_partner_1 {width: 99px; height: 50px; float: left; background: url("../images/smartphones/800/button_partner.png") 0 0 no-repeat;}
.button_partner_1:hover {background-position: 0;}

div.button_kontakt_01{height: 50px; width: 104px; margin-left: 0; float: left;}
.button_kontakt_1 {width: 104px; height: 50px; float: left; background: url("../images/smartphones/800/button_kontakt.png") 0 0 no-repeat;}
.button_kontakt_1:hover {background-position: 0;}

div.button_impressum_01{height: 50px; width: 164px; float: left;}
.button_impressum_1 {width: 164px; height: 50px; float: left; background: url("../images/smartphones/800/button_impressum.png") 0 0 no-repeat;}
.button_impressum_1:hover {background-position: 0;}

div.global_warper {
	width: 800px;
	padding-top: 10px;
}

div.textarea_warper {
	width: 800px;
	padding-top: 0px;
}

div.textarea_top {
	width: 800px;
	background-image: url(../images/smartphones/800/content_bgs/textarea_top.png);
}

div.textarea_middle {
	width: 760px;
	background-image: url(../images/smartphones/800/content_bgs/textarea_middle.png);
}

div.textarea_bottom {
	width: 800px;
	background-image: url(../images/smartphones/800/content_bgs/textarea_bottom.png);
}

}
UPDATE: Kumpel mit HTC Desire HD hat ebenfalls displaybreite von 800 und sieht auf dem Handy die PC version.

Geändert von Cybertronic (26.07.2011 um 13:36 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 28.07.2011, 21:41
Benutzerbild von Cybertronic
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.02.2005
Beiträge: 271
Cybertronic ist in Verruf geraten
Standard

dachte mir nach 3 tagen Bumpe ich mal
Mit Zitat antworten
  #9 (permalink)  
Alt 25.08.2011, 11:44
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 05.08.2009
Beiträge: 141
Erdbeertorte befindet sich auf einem aufstrebenden Ast
Standard

Wieso heißt es eigentlich immer
Code:
@media only screen and
so werden immer Fehler in der CSS angezeigt.

Wie bekomme ich zum Beispiel
Code:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {

}
valide nach CSS3
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen Fools (X)HTML 3 13.09.2010 11:57
dynamische Webseite nach Aussen hin verlängern möglich? keinplan CSS 11 15.08.2010 21:32
Wie sieht eine Webseite in verschiedenen Browsern aus TreasureZone Grafik, Design, Typografie 5 18.05.2010 19:52
Webseite lässt sich im Mozilla nicht scrollen xxxarndxxx CSS 3 30.10.2007 10:58
Bitte eure Meinungen zu meiner neuen Webseite laborix Site- und Layoutcheck 22 04.11.2006 20:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:50 Uhr.