Css Datei wird auf dem Handy nicht erkannt?

7 Antworten

germanils
06.03.2020, 14:08

Klar, wenn die Website auf einem Webserver liegt und dort alle Dateien korrekt eingebunden sind, funktioniert das auch. Du kannst auch zum Testen einen lokalen Webserver wie XAMPP aufsetzen.
Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites
Onyxx76 
Beitragsersteller
 07.03.2020, 13:18

Probiere ich mal aus, danke ^^

EinAlexander  06.03.2020, 14:15
Klar, wenn die Website auf einem Webserver liegt

Ein Webserver ist zur korrekten Darstellung von HTML und CSS nicht notwendig.

germanils  06.03.2020, 14:41
@EinAlexander

Habe ich auch nicht behauptet. Es wurde aber danach gefragt.

Mein Ziel ist es sie online zu stellen, sobald sie fertig ist. Da kam mir die Frage auf, ob mobile Geräte die externen Dateien wie css und Bilder erkennen, wenn sie online gestellt wird.
Onyxx76
07.03.2020, 13:17

Der HTML Teil:

<!DOCTYPE html>
<html>
<head>
	<title>Schlüsseldienst Viersen</title>
	<link rel="stylesheet" type="text/css" href="css/Start_2.css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div class="main">
	<!-- Body -->
	<header class="header">
		<ul>
			<li><img src="pic/Logo_Zylinder_2011.png" class="imgZylinder"></li>
			<li><p><span class="mbT1">Schlossprofi Pitz</span><br>
				<span class="mbT2"> Ihr Fachgeschäft in Viersen</span></p></li>
			
			<li>
				<!-- Menu Button -->
				<nav class="menu">
					<li><a href="Start_2.html" style="background-color: #df001c;">Start</a></li>
					<li><a href="" >Notdienst</a></li>
					<li><a href="" >Kontakt</a></li>
					<li><a href="" >Impressum</a></li>
					<li><a href="" >Datenschutz</a></li>
				</nav>
			</li>
			
			<li><p><span class="mbT3">Notdienst 0177 / 14 06 045</span></p></li>
			
		</ul>
	</header>
	
	<!-- article -->
	<img src="pic/Laden_breit.jpg" class="imgLaden">
	<img src="pic/Türnotdienst.png" class="imgTürnotdienst">
	
	<article class="article">
		<span class="Überschrift"><p>Herzlich Willkommen auf der Seite von Schlossprofi Pitz in Viersen</p></span>
		<span class="Unterschrift"><p>Ihrem Schlüsseldienst Fachbetrieb in Viersen.</p></span>
		
		<span class="Absatz1"><p>Wir sind Ihr kompetenter Ansprechpartner für Sicherheitstechnik, 
		Tür- und Fensterabsicherungen, Schließanlagen (elektronisch / mechanisch), <br>Tresore,
		Schließzylinder, Schlüssel und vieles andere mehr. Wir beraten Sie ausführlich und 
		fertigen für Sie nach Angebot.</p></span>
		
		<span class="Absatz2"><p>
		Außerdem bieten wir einen Schlüsselnotdienst zu fairen Preisen an. Als seriöser 
		Fachbetrieb achten wir darauf so wenig Kosten wie möglich<br> zu verursachen.
		Die Tür ist zugefallen, Schlüssel steckt ... Ärgerlich, aber zugefallene Türen lassen sich
		in den meisten Fällen öffnen, 
		ohne etwas <br>zu beschädigen.</p></span>
		
		<span class="Absatz3"><p>Unser Schlüsseldienst / Türnotdienst ist für Sie
		in <a href="Kontakt.html" id="TxtColor" title="Unsere Kontaktseite">Viersen, Süchteln, Dülken, Anrath</a> und 
		<a href="Kontakt.html" id="TxtColor" title="Unsere Kontaktseite">Viersenland</a> unterwegs und hilft Ihnen<br>
		Tag und Nacht schnell und zuverlässig.</p></span>
		
		<span class="Absatz4"><p>Schlossprofi Pitz</p></span>
	</article>

	<footer class="footer">
		<p>Schlossprofi Pitz - Markus Pitz - Hauptstraße 110 - 
		41747 Viersen - Telefon: 02162 - 3642 111 - Mobil: 0177 1406 045 - 
		<a href="" >Kontakt</a> - <a href="" >Impressum</a> - 
		<a href="" >Datenschutz</a></p>
	</footer>
	
	<aside class="Aside">
		<div class="WeißBalken"><ul>
		<li><img src="pic/burgwächter_1.png" class="WBimg1"></li>
		<li><img src="pic/ikon_assa_2.png" class="WBimg2"></li>
		<li><img src="pic/silca_3.png" class="WBimg3"></li>
		<li><img src="pic/ankerslot_4.jpg" class="WBimg4"></li>
		<li><img src="pic/Börkey_5.png" class="WBimg5"></li>
		<li><img src="pic/drumm_6.png" class="WBimg6"></li>
		<li><img src="pic/abus_7.png" class="WBimg7"></li>
		<li><img src="pic/evva_8.png" class="WBimg8"></li>
		<li><img src="pic/renz_9.png" class="WBimg9"></li>
		</ul></div>
	</aside>
</div>

</body>
</html>

Der CSS Teil:

*{
	padding: 0px;
	margin: 0px;
}


.main {
	width: 960px;
	height: 1034.9px;
	margin: auto;
}


/* ------- header ------- */ 


.header {
	width: 100%;
	height: 100px;
	background-color: #033983;
}


.header a:hover{
	background-color: #df001c;
	color: white;
	text-decoration: none;
}


.header li {
	list-style: none;
	float: left;
}


.imgZylinder {
	width: 149.1px;
	height: auto;
	padding: 11px 0 0 10px;
}


.mbT1 {
	font-family: Arial Black;
	font-size: 17pt;
	color: white;
	position: relative;
	padding-left: 15px;
	top: 17px;
}


.mbT2 {
	font-family: Freestyle Script;
	font-size: 20pt;
	color: red;
	position: relative;
	padding-left: 80px;
	top: 22.5px;
}


/* ------- menu ------- */


.menu {
	padding: 12px 0 0 136.5px;
}


.menu a {
	font-family: Calibri;
	font-size: 9pt;
	line-height: 70px;
	color: white;
    text-decoration: none;
	display: flex;
	text-align:center;
	flex-direction: column;
	justify-content:center;
	width: 70px;
	height: 25px;
	margin: 10px 4.5px 0 0;
}


.mbT3 {
	font-family: Arial Black;
	font-size: 19pt;
	color: white;
	padding: 5px 0 0 135px;
	position: relative;
	top: 5px;
	
}


/* ------- article ------- */


.imgLaden {
	width: 100%;
	height: auto;
	padding: 4px 0 0 0;
	z-index: 1;
}


.imgTürnotdienst {
	width: 405.05px;
	height: auto;
	position: relative;
	top: -444px;
	left: 555px;
	z-index: 2;
}


.Überschrift {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 14.5pt;
	color: #033983;
	position: relative;
	top: -185px;
	left: 10px;
}


.Unterschrift {
	font-family: Calibri;
	font-size: 11pt;
	color: red;
	position: relative;
	top: -185px;
	left: 10px;
}


.Absatz1 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -165px;
	left: 10px;
}


.Absatz2 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -145px;
	left: 10px;
}


.Absatz3 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -125px;
	left: 10px;
}


.Absatz3 a {
	text-decoration: none;
	color: #033983;	
}


.Absatz4 {
	font-family: Calibri;
	font-weight: Bold;
	font-size: 11.5pt;
	color: #033983;
	position: relative;
	top: -105px;
	left: 10px;
}


/* ------- footer ------- */


.footer {
	font-family: Arial;
	font-size: 9pt;
	color: white;
	background-color: red;
	width: 100%;
	height: 25px;
	display: flex;
	text-align: center;
	flex-direction: column;
	justify-content:center;
	position: relative;
	top: -65px;
}


.footer a {
	text-decoration: none;
	color: white;
}


/* ------- aside ------- */


.Aside {
	width: 100%;
	height: 85px;
	background-color: #033983;
	display: flex;
	flex-direction: column;
	justify-content:center;
	position: relative;
	top: -61.5px;
}


.WeißBalken {
	width: 100%;
	height: 65px;
	display: flex;
	flex-direction: column;
	justify-content:center;
	background-color: white;
}


.WeißBalken li {
	list-style: none;
	float: left;
	display: flex;
	flex-direction: column;
	justify-content:center;
}


.WBimg1 {
	width: auto;
	height: 52px;
	position: relative;
	margin-left: 21.8px;
}


.WBimg2 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 10.5px;
	margin-left: 28px;
}


.WBimg3 {
	width: auto;
	height: 40px;
	position: relative;
	margin-top: 6.5px;
	margin-left: 28px;
}


.WBimg4 {
	width: auto;
	height: 45px;
	position: relative;
	margin-top: 7px;
	margin-left: 28px;
}


.WBimg5 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg6 {
	width: auto;
	height: 30px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg7 {
	width: auto;
	height: 40px;
	position: relative;
	margin-top: 8.5px;
	margin-left: 28px;
}


.WBimg8 {
	width: auto;
	height: 37.85px;
	position: relative;
	margin-top: 11px;
	margin-left: 28px;
}


.WBimg9 {
	width: auto;
	height: 35px;
	position: relative;
	margin-top: 8.3px;
	margin-left: 28px;
}


/* ------- Media Queries ------- */ 


@media only screen and (max-width: 768px) {
	.main {
		width: 100%;
		background-color: lightgreen;
		position: absolute;
		overflow-y: hidden;
	}
	
	/* ------- header ------- */ 
	
	.header {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- menu ------- */




	
	/* ------- article ------- */
	
	.imgLaden {
		visibility: hidden;
		position: absolute;
	}
	
	.imgTürnotdienst {
		visibility: hidden;
		position: absolute;
	}
	
	.article {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- footer ------- */
	
	.footer {
		visibility: hidden;
		position: absolute;
	}
	
	/* ------- aside ------- */
	
	.Aside {
		visibility: hidden;
		position: absolute;
	}
	
}

Das Resp Design ist bis jetzt noch nicht angefangen, aber soll in derselben HTML Datei sein. Auf dem PC funktioniert die Verlinkung über rel und alles einwandfrei.
GanMar
Nutzer, der sehr aktiv auf gutefrage ist
im Thema CSS
06.03.2020, 14:15
und festgestellt, dass mein Handy keine externen Dateien von der HTML Seite erkennt

Und Du bist absolut sicher, daß es sich dabei nicht nur um einen Fehler bei der Pfadangabe handelt?
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS
06.03.2020, 14:29
  • Wie sieht es denn auf einem Desktop-Rechner aus? Oder bindest du dort andere CSS-Dateien ein?
  • Wie äußert sich das Nicht-Erkennen der externen Dateien? Nur an ihrer Anzeige? Es wäre hilfreich, mit den Entwicklertools zu prüfen, welche Dateien geladen werden und welche Requests fehlgeschlagen sind oder nicht. Browser wie Chrome oder Safari bieten dir die Möglichkeit des Remote Debugging.
PeterP58
06.03.2020, 14:07

Hast Du die Datei richtig eingebunden? Also mit relativer Pfadangabe? o_O