个人中心
gpt4 book ai didi

android phonegap设计问题

转载 作者：行者123 更新时间：2023-11-28 18:43:02 24 4
gpt4 key购买 nike

我的应用程序是使用 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]

如何解决我的问题？

更新在我上面的代码中，我只为页脚添加了这一行

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

最佳答案

我遇到了类似的问题，但我的显示的是菜单选项。我认为 css 位置在文本软键盘加载时被破坏。

$('#menuFooter').css('position', 'fixed');
$('#menuFooter').toggle();

关于android phonegap设计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11132353/

24 4 0
文章推荐： python - Flask RESTless 删除多个主键
文章推荐： Python unittest 不识别测试
文章推荐： javascript - 在非 mozilla 浏览器中应用 MozTransform(通过 JS)
文章推荐： python - 如何使python内置函数支持关键字参数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com