1

我的应用程序是使用 html 页面和 css 的 android phonegap 应用程序。但是我的应用程序设计在不同的模拟器中有所不同。我需要为所有移动设备获得相同的 UI 设计。

笔记

我没用过jquery mobile

这是我的代码

<!DOCTYPE HTML>
    <html>
      <head>
        <meta name="viewport" content="width=320; user-scalable=no" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>PhoneGap</title>
        <script src="../Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

        <link rel="stylesheet" href="../js/master.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <script type="text/javascript">
        </script>
        <style type="text/css">
        label.custom-select 
        {
        position: relative;
        }
        .custom-select select 
        {
            display: inline-block;
            border: 2px solid #03498A;
            padding: 2px 3px 3px 50px;
            margin: 0;
            outline:none; /* remove focus ring from Webkit */
            line-height: 1.2;
            background: #03498A;
            color: #FFFFFF;
            font-size:15pt;font:bold;
            width:80%;
            height:7%;
            -webkit-appearance:none; /* remove the strong OSX influence from Webkit */
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 2px;
        }

        /* for Webkit's CSS-only solution */
        @media screen and (-webkit-min-device-pixel-ratio:0) 
        {
            .custom-select select 
            {
                padding-right:30px;    
            }
        }

        /* Since we removed the default focus styles, we have to add our own */
        .custom-select select:focus 
        {
            -webkit-box-shadow: 0 0 3px 1px #c00;
            -moz-box-shadow: 0 0 3px 1px #c00;
            box-shadow: 0 0 3px 1px #c00;
        }

        /* Select arrow styling */
        .custom-select:after 
        {
            content: "â–¼";
            position: absolute;
            top: 2%;
            right: 0;
            bottom: 0;
            font-size: 60%;
            line-height: 30px;
            padding: 0 7px;
            background-image: url(../images/dd.PNG);
            background-repeat:no-repeat;
            padding-left:80%;
            color: #03498A;
            pointer-events:none;
            -webkit-border-radius: 0 6px 6px 0;
            -moz-border-radius: 0 6px 6px 0;
            border-radius: 0 6px 6px 0;
        }

        .no-pointer-events .custom-select:after 
        {
            content: none;
        }
        .dropdown
        {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background-color: #03498A;
            border: 1px solid;
            color: #FFFFFF;
            width:260px;font-size:20pt;font:bold;
        }
        #setting
        {
            margin-left:10%;
            margin_right:5%;
        }
        #checknotify
        {
            margin-left:50%;
        }
        #checkphone
        {
            margin-left:38%;
        }
        #checklocation
        {
            margin-left:51%;
        }
        #allcauses
        {
            margin-left:2%;
        }
        #link
        {
            margin-left:20%;
        }
        #managelabel
        {
            margin-left:6%;
        }

        .checkBox
        {
            background-position: 0px 0px;
        }
        .checkBoxClear
        {
            background-position: -32px 0px;
        }
        .checkBox, .checkBoxClear
        {
            background-image: url('../images/Check.png');
            background-repeat: no-repeat;
            display: inline-block;
            float: left;
            width: 32px;
            height: 32px;
            padding: 0px;
            margin: 0px;
            cursor: hand;
        }
        .checkBox1
        {
            background-position: 0px 0px;
        }
        .checkBoxClear1
        {
            background-position: -32px 0px;
        }
        .checkBox1, .checkBoxClear1
        {
            background-image: url('../images/Check.png');
            background-repeat: no-repeat;
            display: inline-block;
            float: left;
            width: 32px;
            height: 32px;
            padding: 0px;
            margin: 0px;
            cursor: hand;
        }
        .checkBox2
        {
            background-position: 0px 0px;
        }
        .checkBoxClear2
        {
            background-position: -32px 0px;
        }

        .checkBox2, .checkBoxClear2
        {
            background-image: url('../images/Check.png');
            background-repeat: no-repeat;
            display: inline-block;
            float: left;
            width: 32px;
            height: 32px;
            padding: 0px;
            margin: 0px;
            cursor: hand;
        }
            .checkBox3
        {
            background-position: 0px 0px;
        }
        .checkBoxClear3
        {
            background-position: -32px 0px;
        }

        .checkBox3, .checkBoxClear3
        {
            background-image: url('../images/Check.png');
            background-repeat: no-repeat;
            display: inline-block;
            float: left;
            width: 32px;
            height: 32px;
            padding: 0px;
            margin: 0px;
            cursor: hand;
        }
        </style>
      </head>
      <body >
        <div>
            <div><input type="image" style="width:100%" src="../images/set.png" />
            </div>
            <div align="center" style="margin-top:2%"><input type="image" src="../images/load.png" style="width:90%" />
                <input type="image" src="../images/image.png" style="width:90%"/>
                <div style="margin-top:5%">
                    <label id="managelabel" style="width:70%;font-size:12pt">Manage Cause Settings</label>
                    <a id="link" href="javascript:help()">Help ?</a>
                </div>
            </div>
            <div id="loadingScreen" align="center"></div>
            <div align="center" style="margin-top:5%"><label class="custom-select"><select name="mydropdown" style="width:90%;height:10%;font-size:15pt" >
                <option id="0" value="opt">option</option>
                </select></label>
            </div>
            <div style="margin-top:3%;padding:5%">
                <table>
                    <tr width="100%">
                        <td width="90%"><label>One</label></td>
                        <td><div id="Div1" class="checkBox">&nbsp;</div></td>
                        <label for="Div1"></label>
                        <td><input value='' type='checkbox' style="display:none"  /></td>
                    </tr> 
                    <tr width="100%">
                        <td ><label>Two</label></td>
                        <td><div id="Div2" class="checkBox1">&nbsp;</div></td>
                        <label for="Div2"></label>
                        <td><input value='' type='checkbox' style="display:none" /></td>
                    </tr>
                    <tr width="100%">
                        <td ><label>Three</label></td>
                        <td><div id="Div3" class="checkBox2">&nbsp;</div></td>
                        <label for="Div3"></label>
                        <td><input value='' type='checkbox' style="display:none" /></td>
                    </tr> 
                </table>
            </div>
            <br/>
            <div>
                <table>
                    <tr width="100%">
                        <td><div id="Div4" class="checkBox3">&nbsp;</div></td>
                        <label for="Div4"></label>
                        <td><label style="width:60%;font-size:12pt">Here settings</label></td>
                        <td><input value='' type='checkbox' style="display:none" id='chkAllCauses'/></td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="margin-top:32%">
            <div style="border-width:3px;padding-top:2%;padding-bottom:2%;padding-right:0px;padding-left:0px;background-color:#00458D;bottom:0;" align="center">
                <table width=100%>
                <input type="image" src="../images/first.PNG" style="width:23%" />
                <input type="image" src="../images/second.jpg" style="width:23%" />
                <input type="image" src="../images/third.jpg" style="width:23%" />
                <input type="image" src="../images/fourth.png" style="width:23%"/>
                </table>
            </div>
        </div>
    </div>
    </body>
    </html>

我附上了两张截图,我在不同的两个模拟器中运行现在你可以简单地分析问题。

![图片来自 Galaxy Tab][1]


来自settingFromAndroid2.2的图片底部设计消失了,当我向下滚动时,只有我可以看到这个。

![Android2.2][2]


要清除这些问题,我正在尝试使用页脚

假设我的设计中有文本框,

<input type="text"  style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" />

我无法在文本框中输入文本,我的设计在输入时折叠,这里我附上了屏幕截图和 html 文件。请查看。![带页脚][3]

如何解决我的问题?

UpDate 在我上面的代码中,我只为页脚添加了这一行

    <input type="text"  style="width: 80%;height: 35px;font-size:15pt;border:4px solid orange" placeholder="Email Address (User ID)" />
      <div data-role="footer" class="ui-bar"  style="height:2px;bottom:0%;padding-bottom:0%;">

    <table width=100%>
            <input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/>
            <input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/>
            <input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/>
            <input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/>
            </table>
    </div>
      </div>

    </div>
  </body>
</html>
4

2 回答 2

1

我有一个类似的问题,但我的显示一个菜单选项。我认为css位置在文本软键盘加载时被破坏。

$('#menuFooter').css('position', 'fixed');
$('#menuFooter').toggle();
于 2012-08-15T05:16:06.800 回答
0

通常带有 jquery mobile 的 phonegap 会产生这类问题。在某些设备中会发生页脚跳转。通过以下代码在固定位置制作页脚,

<div data-role="footer" data-position="fixed">
    <h1>Fixed Footer!</h1>
</div>

或者

你可以做一些css样式更改来制作一个固定的页脚

[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}  

或者

您可以将 iscroll jquery 移动插件用于带有列表项的固定页脚。看这个演示

于 2012-06-21T06:33:22.923 回答