Bilder werden nicht auf dem mobilen Gerät angezeigt, sondern auf dem Desktop angezeigt, mit PhoneGap

Ich mache ein Projekt für die Hochschule, aber Probleme mit Bildern auf dem mobilen Gerät angezeigt. Desktop screenshot Bilder werden nicht auf dem mobilen Gerät angezeigt, sondern auf dem Desktop angezeigt, mit PhoneGap

So wird das Bild im Hintergrund auf dem Desktop angezeigt, wie oben gezeigt. und unten ist die mobile Anwendung ohne Hintergrundbelastung.

mobile screenshot

Dies ist mein Code. Mein Bildstandort ist korrekt, da der Desktop ihn lädt und ich den Stilcode von einer anderen Stapelüberlaufantwort bekommen habe, aber es hat nicht geholfen.

<!DOCTYPE html> 

<html> 
<style> 
#bg { 
background: url(images/logo.jpg) repeat scroll 50% 0px/cover transparent; 
background-image: url(images/logo.jpg); 
width: 400px; 
height: 400px; 
} 
</style> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, 
user-scalable=yes, width=device-width"> 

    <title>ITCOA</title> 

</head> 
<div id="bg"> 
<body> 
    <h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow Orientation App </h1> 
     <div id="navcontainer" style="margin-left:150px;margin-top:100px;"> 
      <button type="button" id="findPathButton"onclick="parent.location='findPlace.html'">Find a place!</button><br><br> 
      <button type="button" id="showMapsButton" onclick="parent.location='showMaps.html'">Show Maps!</button> 
     </div> 

</div> 
    <script type="text/javascript" src="cordova.js"></script> 
</body>

Vielen Dank für jede Hilfe.

Aktualisiert Code

<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width"> 
<title>ITCOA</title> 
<script src="cordova.js" defer></script> 
<style> 
    #bg { 
    background: url('images/logo.jpg') center center/cover no-repeat; 
    width: 400px; 
    height: 400px; 
    } 

    button { 
    margin: 15px 0 15px 0; 
    display: block; 
    } 

</style> 
</head> 

    <body> 
    <div id="bg"> 
     <h1 style="text-align:center;margin-top:80px"> Welcome to IT Carlow 
Orientation App </h1> 
    <div id="navcontainer" style="margin-left:150px;margin-top:100px;"> 
    <button type="button" id="findPathButton" 
onclick="parent.location='findPlace.html'">Find a place!</button> 
    <button type="button" id="showMapsButton" 
onclick="parent.location='showMaps.html'">Show Maps!</button> 
    </div> 
</div>

Quelle

2017-04-26 Callum Flannery

Vor allem <style> Tag sollte in Ihrem <head> sein. <div id="bg"> ist über HTML-Body-Element. Warum hat #bg id 2 Hintergrundaussagen? background: url(images/logo.jpg) repeat scroll 50% 0px/cover transparent; und background-image: url(images/logo.jpg);? Bitte lesen Sie mindestens W3s. Andere Sache ist, dass Ihr Code insgesamt schrecklich ist. Ich rate, keine Inline-Styling-Elemente mehr zu verwenden und auch kein inline-javaScript mehr zu verwenden. Sie können <script src="cordova.js" defer></script> zu Ihrem mit defer Flag hinzufügen. Ziehen Sie in Erwägung, Ihrem Projekt eine CSS-Datei hinzuzufügen und alle Ihre Stile dort hinzuzufügen. Auch wenn Sie bereits eine js-Datei haben, können Sie Ihr Klickverhalten dort durch addEventListener() Methode setzen.

Update: jsfiddle
Update2:

Quelle

2017-04-26 17:13:45 NightKn8

ok danke für den Kommentar, aber nicht schrecklich Code haben Auswirkungen auf mein Problem? oder hast du hier etwas erklärt, um meinem Problem zu helfen? Auch ich habe nur meinen Stil hier, weil ich versuche, es funktioniert, es ist nicht, wie es tatsächlich aussehen wird –

Bitte sehen Sie meine aktualisierte Antwort. – NightKn8

Ich versuchte die Antwort, aber es gab keine Veränderung. –

Bilder werden nicht auf dem mobilen Gerät angezeigt, sondern auf dem Desktop angezeigt, mit PhoneGap

Antwort

Verwandte Themen