我使用 JSP 的 jQuery-mobile 有 2 个问题,第一个是我的网页没有调整到屏幕大小“看屏幕截图”,我的背景必须是白色全黑我的标题大部分是黑色的 网页格式
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
<title>First Mobile JSF page</title>
<meta name="viewport" content="width=500, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<style>
#box1 {
margin-left: 25%;
margin-top: 55%;
width: 50%;
border-style: solid;
}
</style></head><body>
<form id="j_idt5" name="j_idt5" method="post" action="/WebApplication1/faces/index.xhtml;jsessionid=1a059ff206049c9e2318396c28bf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<div data-role="page" home="home">
<div data-role="header">
<h1>Sample Mobile #1</h1>
<div data-role="content">
<p>Welcome to </p>
name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" />
<div id="box1"> </div>
</div>
</div>
<div data-role="footer" data-postion="fixed">
<div data-role="navbar">
<ul>
<li><a href="WebApplication1" data-ajax="false">Example 1</a> </li>
<li><a href="WebApplication1" data-ajax="false">Example 2</a> </li>
<li><a href="WebApplication1" data-ajax="false">Example 3</a> </li>
</ul>
</div>
</div>
</div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="4958076424142593255:-1635836014572318330" autocomplete="off" />
</form></body>
</html>
最佳答案
你有几个错误:
你的内容 div 在你的标题 div 里面,把它移到上面,基本上改变这个:
<div data-role="header"> <h1>Sample Mobile #1</h1> <div data-role="content"> <p>Welcome to </p> name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" /> <div id="box1"> </div> </div> </div>
为此:
<div data-role="header"> <h1>Sample Mobile #1</h1> </div> <div data-role="content"> <p>Welcome to </p> name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" /> <div id="box1"> </div> </div>
这将解决颜色问题。
您为页面容器设置了什么边距?这可能是您的页面屏幕尺寸问题的原因。
使用正确的视口(viewport)元标记:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
关于css - jQuery-mobile 页脚样式问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18650272/