图像没有在移动设备上显示，但在桌面上显示，使用PhoneGap

我正在为大学做一个项目，但无法在移动设备上显示图像。 Desktop screenshot 图像没有在移动设备上显示，但在桌面上显示，使用PhoneGap

因此，背景中的图像显示在桌面上，如上所示。以下是没有后台加载的移动应用程序。

这是我的代码。我的图像位置是正确的，看到桌面加载它，我从另一个堆栈溢出答案得到的样式代码，但它没有帮助。

<!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>

感谢您的帮助。

更新代码

<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>

来源

2017-04-26 Callum Flannery

所有<style>标签首先应该在你的<head>。 <div id="bg">位于html body元素的上方。为什么#bg id有2个后台语句？ background: url(images/logo.jpg) repeat scroll 50% 0px/cover transparent;和 background-image: url(images/logo.jpg);？请至少阅读W3s。其他的事情是你的代码总体糟糕。我建议停止使用内联样式元素，并停止使用内联javaScript。您可以使用defer标志将<script src="cordova.js" defer></script>添加到您的<head>中。考虑将css文件添加到您的项目中并在其中添加所有样式。此外，既然您已经有js文件，您可以通过addEventListener()方法将您的点击行为放在那里。

更新： jsfiddle
UPDATE2：

来源

2017-04-26 17:13:45 NightKn8

确定感谢您的评论，但可怕的代码对我的问题的影响？或者你在这里解释了什么来帮助我解决问题？也只有我的风格在这里，因为即时通讯试图让它工作，它不是如何实际上看 –

请看我更新的答案。 – NightKn8

我试过答案，但没有变化。 –

图像没有在移动设备上显示，但在桌面上显示，使用PhoneGap

回答

相关问题