Fatal编程技术网
  • android/
  • Android HTML5移动网页-触摸区域问题

Android HTML5移动网页-触摸区域问题

android html mobile google-chrome-devtools

Android HTML5移动网页-触摸区域问题,android,html,mobile,google-chrome-devtools,Android,Html,Mobile,Google Chrome Devtools,我正在尝试创建一个移动网页，我的网页有一个表单，用户可以填写详细信息并提交。尝试使用Chrome emulator时发现触摸/点击非常不一致，并附上了它的屏幕截图。。它很难在输入框内单击，有时按钮似乎不可单击。当尝试单击按钮时，它会突出显示一些其他元素，就像我单击了一样，它偶尔会单击它们。我认为有一些方法可以定义你的可点击元素区域，或者我不知道。。对不起，我是移动开发新手 下面是我的代码摘录 <!DOCTYPE html> <html> <head> &

我正在尝试创建一个移动网页，我的网页有一个表单，用户可以填写详细信息并提交。尝试使用Chrome emulator时发现触摸/点击非常不一致，并附上了它的屏幕截图。。它很难在输入框内单击，有时按钮似乎不可单击。当尝试单击按钮时，它会突出显示一些其他元素，就像我单击了一样，它偶尔会单击它们。我认为有一些方法可以定义你的可点击元素区域，或者我不知道。。对不起，我是移动开发新手

下面是我的代码摘录

<!DOCTYPE html>
<html>
<head>

  <title>Dragend JS mobile demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      border: 0;
    }

    body {
      background: #eee;
      padding: 15px;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #demo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      background: #457;
      cursor: hand;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
    }

    #demo li.first {
      background: #577;
    }

    #demo li.middle {
      background: #1e8;
    }

    #demo li.last {
      background: #e8b;
    }

    #dragend {
      position: absolute;
      bottom: 50px;
      right: 50px;
      background: #345;
      padding: 18px;
      color: #fff;
      border-radius: 3px;
      width: 150px;
      font-size: 15px;
    }

    #dragend h1 {
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 12px;
    }

    #dragend a {
      text-decoration: underline;
      color: #fff
    }

    #demo p {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 30px;
      margin-bottom: 30px;
    }

    #demo p:first-child {
      margin-top: 30px;
    }

    #demo p:last-child {
      margin-bottom: 200px;
    }

  </style>


</head>
<body>

  <div id="demo">
    <ul>
      <li class="first dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
      </li>
      <li class="dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
        <p><input type="date" name="date" value="Deadline Date" id="date" class="shortField"></p>
        <p><input type="time" name="hour" value="Deadline Time" id="time" class="shortField"></p>
        <p>
        <input class="css_btn_formbtns" type="submit" value="Submit" style="float:left" />
        <input class="css_btn_formbtns" type="button" value="Back" style="float:right"/></p>
      </li>
      <li class="middle dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nihil fugit <a href="http://google.com">cupiditate</a> aut sit temporibus sint repellat et. Neque, harum, vel aut quidem tempore odit amet qui officiis ipsa voluptatem.</p>
     </li>
      <li class="dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nihil fugit <a href="http://google.com">cupiditate</a> aut sit temporibus sint repellat et. Neque, harum, vel aut quidem tempore odit amet qui officiis ipsa voluptatem.</p>
     </li>
      <li class="last dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
      </li>
    </ul>
  </div>


  <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="../../dragend.js"></script>

  <script>

    $(function() {
      new Dragend($("#demo").get(0), {
        afterInitialize: function() {
          $("#demo").css("visibility", "visible");
        }
      });
    });

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-219062-10']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

  </script>

</body>
</html>
我使用的是Chrome emulator，仅在上面的代码中进行了尝试，但在文本框中单击它似乎非常困难

请帮忙

在my Chrome中运行您的HTML还选择了三星Galaxy S4，使用鼠标单击时效果良好。添加到小部件中的Chrome控件非常小，并不是最好的用户体验。您可以尝试使用CSS使输入框更大，从而更易于使用，例如输入[type=date]{font size:2em}。感谢您的评论，是的，您是对的。它的功能刚刚好，减去了用户使用简单的2个控件的延迟，但我有一个旋转木马和不同的按钮和控件，它似乎不能很好地工作。我已经更新了代码，你能检查一下吗？谢谢你抽出时间。。您将需要js文件：Hey发现了问题。。。你知道吗，这是该死的谷歌切掉这个帖子：