Question

我的jQuery-mobile使用JSP有2个问题，首先是我的网页没有调整到屏幕大小“看屏幕拍摄”而我的背景必须是白色是全黑我的标题最黑 HTML enter image description here

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

Answer 1

您有几个错误：

您的内容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>

这将解决颜色问题。

您为页面容器设置了什么保证金？这可能是导致页面屏幕尺寸问题的原因。

使用正确的视口元标记：

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

jQuery-mobile footer Style问题？

1 个答案: