zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Webseite fürs Iphone gestalten

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.04.2013, 23:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2013
Beiträge: 2
sandy befindet sich auf einem aufstrebenden Ast
Standard Webseite fürs Iphone gestalten

Hi hab ne webseite gemacht die am iphone zwar gut aussieht aber die schrift ist mir da zu klein. ich hab dann mal versucht mit @media only screen and (max-device-width: 480px) { zu arbeiten komme da aber nicht weiter, was genau muss ich da rein schreiben, damit die schriftgrösse der navigation und dem inhaltstext auf 20px erhöht wird?

Danke für eure hilfe!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 02.04.2013, 07:21
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von sandy Beitrag anzeigen
was genau muss ich da rein schreiben, damit die schriftgrösse der navigation und dem inhaltstext auf 20px erhöht wird?
eigerntlich ganz einfach:
Pixel ist als Einheit für die Schriftgröße im Zeitalter des Smartphones sowas von ungeeignet! Nimm em oder Prozent.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.04.2013, 08:43
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Zeig uns bitte deinen Code, am Besten gleich mit einem Link dorthin, ohne Code kann dir nicht zuverlässig geholfen werden.
Mit Zitat antworten
  #4 (permalink)  
Alt 02.04.2013, 13:06
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Scheint wohl nicht ganz so trivial wie es scheint, zumindest wenn man diesem Beitrag gelesen hat: Ein Blick durch den Viewport | Webkrauts
Interessant ist auch der Kommentar von Patrick.

Wenn man dann noch auf die Developer-Seiten von Apple geht, lässt man es wohl ganz bleiben, nicht sehr ermutigend das Ganze.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 02.04.2013, 13:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.04.2013
Beiträge: 2
sandy befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank
habe in meiner css datei "layout.css" das drinn. Zu unterst ist die @media.

a:link {
text-decoration: underline;
color: #fff;
font-size: 14px;
}
a:visited {
text-decoration: none;
color: #fff;
font-size: 14px;
}
a:hover {
text-decoration: none;
color: #666;
font-size: 14px;
}
a:active {
text-decoration: none;
color: #666;
font-size: 14px;
}


html {
background: url(background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#container {
margin:auto;
border-top:#CC00CC 6px solid;
border-bottom:#CC00CC 6px solid;
width:95%;
max-width:1200px;
min-width:700px;

}


#navigation {
width:27.083%;
float:left;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;


}

#navigation ul {
margin-top: 0;
padding-top:15px;
padding-left:0px;
list-style-type: none;
text-decoration: none;


}

#navigation a {
list-style-type: none;
text-decoration: none;
padding: 5px 0px;
color:#FFF;
display:block;
}

#navigation a:hover {
list-style-type: none;
text-decoration: underline;
color: #666;

}

#inhalt {
margin-left:27.083%;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:14px;
color:#FFFFFF;
padding-top:20px;



}

#container_index {
position: absolute;
width:474px;
height:600px;
top:50%;
left:50%;
margin-left:-237px;
margin-top:-300px;
}


#logo {
width:474px;
height:474px;
position:absolute;
left:50%;
top:35%;
margin-left:-237px;
margin-top:-237px;
background-image:url(Logo.png); background-repeat:no-repeat;
padding-top:20px;

}



#news {
position:absolute;
width:320px;
top:75%;
left:50%;
margin-left:-160px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:14px;
color:#FFFFFF;
padding-bottom:20px;


}


#facebook {
width:80px;
height:80px;
position:absolute;
left:70%;
top:61%;
margin-left:-40px;
margin-top:-40px;


}

#navigation_start {
width:200px;
height:200px;
position:absolute;
right:60%;
top:70%;
margin-right:-100px;
margin-top:-100px;
color:#000;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;


}

#navigation_start ul {
list-style-type: none;
text-decoration: none;

}

#navigation_start a {
list-style-type: none;
text-decoration: none;
padding: 5px 0px;
color:#000;
display:block;
}

#navigation_start a:hover {
list-style-type: none;
text-decoration: underline;
color: #666;

}


#navigation_start a:active {
color: #666;
list-style-type: none;

}

#bringding {
margin-left:300px;
padding-left:0%;
padding-right:5px;

}

#lookatme {
margin-left:300px;
padding-left:0%;
padding-right:10px;

}

#clvideo {
margin-left:300px;
padding-left:0%;
padding-right:10px;

}
#bandsquare {
margin-left:300px;
padding-left:0%;
padding-right:10px;

}



#drehung_website_icons img { /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#drehung_website_icons img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

@media only screen and (max-device-width: 480px) {

#container {width:100%;font-size:36px}

#navigation {float: none;width:100%;font-size:36%}

#inhalt {margin-left:0; font-size:36%}

#a:link {font-size:36%}

#navigation_start {font-size:36%}
}
Mit Zitat antworten
  #6 (permalink)  
Alt 02.04.2013, 15:12
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.035
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Wir brauchen lauffähigen Code, am besten mit Link dorthin, lies bitte die Hinweise für Fragende. Und bitte nutze die Code-Blocks wenn du hier Code posten möchtest, sonst wird das sehr schlecht lesbar.
Mit Zitat antworten
Antwort

Stichwörter
@media, css, iphone

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
Weiche für iPhone und co. + richtig testen? Tony-S CSS 2 09.01.2012 20:11
Startseite für's iPhone: Ich finde den Fehler nicht! Sunlion CSS 1 02.12.2010 11:11
iPhone OS 3_1_2 stellt angeblich Webseite nicht korrekt dar BobbyKreuzberg CSS 4 29.09.2010 22:21
CSS-Styles werden bei einem Linksprung von Webseite A auf Webseite B nicht geladen Fools (X)HTML 3 13.09.2010 11:57
Wie sieht eine Webseite in verschiedenen Browsern aus TreasureZone Grafik, Design, Typografie 5 18.05.2010 19:52


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:57 Uhr.