Question

我使用Jquery Mobile开发了一个Android应用程序。它包含一个标题，其中包含背景图像。在某些手机中，该应用程序运行完美。但在某些手机中，只有包含背景图像的标题才会显示在整个屏幕中，并且没有任何反应。它不显示页面的其余内容。以下是该页面的代码： -

<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />    




<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />



<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script type='application/javascript' src='js/fastclick.js'></script>



</head>
<body >

<div data-role="page" class="content" data-theme='b'>

<div  data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<div class="ui-grid-solo">
<div class="ui-block-a"><div class="logodiv"><img height="100%" width="100%" src="img/logo2.png" /></div> 
</div>
</div>
</div>
Some Content here
Some Content here
Some Content here
</div>
</body>
</html>

CSS如下： -

.ui-page
{
    background-color: #EBEAF2;
}
.ui-header
{
    background-color: #EBEAF2!important;    
}
body 
{
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
.content 
{
    background-image: url(img/bg.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: center; 
    }
body
{
  background-image: img/bcklogo.png;
}

  body ,h1 , h2 ,h3,h4,h5,h6
{
  font-family: 'Roboto',serif;
}

Answer 1

您已跳过编写数据角色内容，并且还有一个div无法正常关闭。

Also in class logodiv you need to provide header height.

Please check this code below

<!DOCTYPE HTML>
<html>
<head>
<title>Demo</title> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />    




<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />



<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style> 

.ui-page
{
    background-color: #EBEAF2;
}
.ui-header
{
    background-color: #EBEAF2!important;    
}
body 
{
    cursor:pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
.content 
{
    background-image: url(img/img.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-size: 300px 300px;
    background-position: center; 
    }
body
{
  background-image: img/img.png;
}

  body ,h1 , h2 ,h3,h4,h5,h6
{
  font-family: 'Roboto',serif;
}

.logodiv {
height: 80px;
}
</style>


</head>
<body>

<div data-role="page" class="content" data-theme='b'>

<div  data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<div class="ui-grid-solo">
<div class="ui-block-a"><div class="logodiv"><img height="100%" width="100%" src="img/img.png" /></div> 
</div>
</div>
</div>
<div data-role="content">
Some Content here
Some Content here
Some Content here
</div>
</div>
</body>
</html>

Jquery移动应用程序标题显示在一些手机的整页

1 个答案: