Hallo liebe Community!
Ich habe hier zwei Stylesheets und möchte diese gerne beide einbinden.
Gelöst habe ich das wie folgt:
Das Problem ist aber, dass das iPhone 5 immer die CSS-Datei für das iPhone 4/4S anfordert. Kommentiere ich den Style für das iPhone 4/4S aus, so nimmt das iPhone 5 auch die korrekte CSS-Datei.
Aber ich will gerne beide funktionierend drin haben und es soll durch das Gerät korrekt ausgewählt werden. Geht das irgendwie?
Desweiteren habe ich ein Problem mit dem Stylesheet für das iPhone 5: Es wird nicht die volle Höhe des iPhone 5 (im Portrait-Modus) ausgefüllt. Ebenfalls nicht die volle Breite (im Landscape-Modus).
Im nachfolgenden findet man das Stylesheet vom iPhone 5:
Ich hoffe, mir kann jemand weiterhelfen. Ich versuche das Problem seit 5 Stunden zu lösen und habe nichts dazu gefunden. :(
Ich habe hier zwei Stylesheets und möchte diese gerne beide einbinden.
Gelöst habe ich das wie folgt:
HTML:
<head>
<!-- Icons and CSS Styles (iPhone 4/4S) -->
<link rel="apple-touch-icon" sizes="144x144" href="/images/WebApp_icon.jpg">
<link href="iPhone4_4S.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width: 460px)">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" sizes="320x460" href="/images/WebApp_startup_icon.jpg">
<!-- Icons and CSS Styles (iPhone 5) -->
<link rel="apple-touch-icon" sizes="144x144" href="/images/WebApp_icon.jpg">
<link href="iPhone5.css" type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1136px)">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-startup-image" sizes="640x1136" href="/images/WebApp_startup_icon.jpg">
</head>Das Problem ist aber, dass das iPhone 5 immer die CSS-Datei für das iPhone 4/4S anfordert. Kommentiere ich den Style für das iPhone 4/4S aus, so nimmt das iPhone 5 auch die korrekte CSS-Datei.
Aber ich will gerne beide funktionierend drin haben und es soll durch das Gerät korrekt ausgewählt werden. Geht das irgendwie?
Desweiteren habe ich ein Problem mit dem Stylesheet für das iPhone 5: Es wird nicht die volle Höhe des iPhone 5 (im Portrait-Modus) ausgefüllt. Ebenfalls nicht die volle Breite (im Landscape-Modus).
Im nachfolgenden findet man das Stylesheet vom iPhone 5:
HTML:
@charset "UTF-8";
/* Everywhere: Headline */
header h1 {
font-family: Arial;
font-size: 18px;
color: white;
text-align: center;
text-shadow: 1 -5px 0 rgba(0,0,0,1.5);
background-color: blue;
margin: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
border-radius: 9px;
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.6) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0) 51%,
rgba(255,255,255,0.2) 100%);
}
/* Everywhere in sub-pages: Sub-Headline */
header h2 {
font-family: Arial;
font-size: 14px;
padding-left: 0;
padding: 0;
margin: 5px;
}
/* Login-Page: Login-Message */
aside h3 {
font-family: Arial;
font-size: 14px;
padding-left: 0;
padding: 0;
margin: 0px;
}
/* Everywhere: Forms */
aside {
background-color: #7e94b0;
border-radius: 10px;
border: 1px solid #a1a7ae;
box-shadow: 1 1px 0 black;
}
/* Everywhere: Body */
body {
background:url(/images/background.png) no-repeat;
}
/* Everywhere: Table presettings */
table {
font-family: Arial;
font-size: 14px;
}
/* Everywhere in tables: Table-Headlines presettings */
th {
font-size: 14px;
border: 1px solid black;
border-collapse: collapse;
}
/* Everywhere: General button presettings */
button {
text-align: center;
font-family: Arial;
font-weight: bold;
font-size: 15px;
-webkit-appearance: none;
border: 0;
padding-left: 16px;
padding-right: 16px;
padding-bottom: 8px;
padding-top: 8px;
margin: 10px;
background-color: #0044cc;
color: white;
border-radius: 9px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
text-shadow: 0 -1px 2px rgba(0,0,0,0.3);
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.6) 0%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0) 51%,
rgba(255,255,255,0.2) 100%);
}
/* Menu: Server Message-Button */
button#message {
font-size: 30px
}
/* Menu: Backup-Button */
button#backup {
font-size: 30px;
}
/* Menu: Edit Server-Button */
button#edit_server {
font-size: 30px;
}
/* Menu: Bans-Button */
button#bans {
font-size: 30px;
}
/* Menu: Logout-Button */
button#logout {
font-size: 30px;
}
/* Headline-Menu: Home-Button */
button#menu_home {
background:url(/images/home.png) no-repeat;
border-radius: 20px;
padding: 2px 14px 7px 13px;
}
/* Headline-Menu: Logout-Button */
button#menu_logout {
background:url(/images/logout.png) no-repeat;
border-radius: 20px;
padding: 2px 14px 7px 13px;
}
/* Backup-Buttons */
button#button_deploy_snapshot {
background:url(/images/deploy.png) no-repeat;
border-radius: 20px;
padding: 2px 14px 7px 13px;
}
button#button_delete_snapshot {
background:url(/images/delete.png) no-repeat;
border-radius: 20px;
padding: 2px 14px 7px 13px;
}Ich hoffe, mir kann jemand weiterhelfen. Ich versuche das Problem seit 5 Stunden zu lösen und habe nichts dazu gefunden. :(
Zuletzt bearbeitet: