可以在PC上运行但不能在移动设备上运行的html

Posted 2023-05-09

技术标签:

【中文标题】可以在PC上运行但不能在移动设备上运行的html【英文标题】：html that work on PC but not work on mobile 【发布时间】：2018-03-04 02:05:57 【问题描述】：

我对 jquery 和 jquery mobile 完全陌生。如果以下问题让您感到难堪，我深表歉意。

最近，我尝试学习如何使用 json 和 jquery 编写页面以从 google sheet 获取数据。经过一番努力，我成功得到了预期的结果。

在此之后，我想更进一步，并尝试使其在移动设备上运行。我知道 jquery mobile 是让它在移动设备上工作的界面，但我完全迷失在学习 jquery mobile 上。因此，我想向你们寻求帮助。谢谢！

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">




  <style>
  table,
    th,
    td 
      margin: 10px 0;
      border: solid 1px #333;
      padding: 2px 4px;
      font: 15px Verdana;
    
    
    th 
      font-weight: bold;
    
    
    //#loader 
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid blue;
    border-bottom: 16px solid blue;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    visibility:hidden;
  
  @-webkit-keyframes spin 
    0% 
      -webkit-transform: rotate(0deg);
    
    
    100% 
      -webkit-transform: rotate(360deg);
    
  
  @keyframes spin 
    0% 
      transform: rotate(0deg);
    
    
    100% 
      transform: rotate(360deg);
    
  
  </style>
  <!--script src="cordova.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


  <form>
    Select Predrill Hole Number:
    <select id="HoleList" onchange="Predrill()">
            <option>Pose 1</option>
            <option>Pose 2</option>
        </select>

    <name="name" id="name">


  </form>
  <br>

  <input type="button" onclick="update_value()" value="Update" />
  <input type="button" onclick="read_value()" value="Read" />

  <div id="showData"></div>
  </div>
  <a href="" id="photo1"><img id="pic" src="" >
    <a>


      <script>
        var script_url = "https://script.google.com/macros/s/AKfycbzHtuKZACiuwQmCc8PqrRAK-nWm61ZtaZpy1Rr7c1Bub1GeThA/exec";

        // Make an AJAX call to Google Script

        function update_value() 
          $("#re").css("visibility", "hidden");
          document.getElementById("loader").style.visibility = "visible";

          var id1 = $("#id").val();
          var name = $("#name").val();

          var url = script_url + "?callback=ctrlq&name=" + name + "&id=" + id1 + "&action=update";

          var request = jQuery.ajax(
            crossDomain: true,
            url: url,
            method: "GET",
            dataType: "jsonp"
          );
        

        // print the returned data
        function ctrlq(e) 
          $("#re").html(e.result);
          $("#re").css("visibility", "visible");
          read_value();
        

        function read_value() 
          $("#re").css("visibility", "hidden");
          document.getElementById("loader").style.visibility = "visible";
          var url = script_url + "?action=read";

          $.getJSON(url, function(json) 
            // Set the variables from the results array

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");

            var header = table.createTHead();
            var row = header.insertRow(0);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = "<b>ID</b>";
            cell2.innerHTML = "<b>Name</b>";

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < json.records.length; i++) 

              tr = table.insertRow(-1);
              var tabCell = tr.insertCell(-1);
              tabCell.innerHTML = json.records[i].Heading;
              tabCell = tr.insertCell(-1);
              tabCell.innerHTML = json.records[i].Information;
            
            var myObj = json.records[0];
            document.getElementById("photo1").href = myObj.Photo1;
            document.getElementById("pic").src = myObj.Photo1;


            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
            document.getElementById("loader").style.visibility = "hidden";
            $("#re").css("visibility", "visible");
          );
        


        function Predrill() 
          var HoleList = document.getElementById("HoleList");
          document.getElementById("name").value = HoleList.options[HoleList.selectedIndex].text;
        
      </script>
</head>

<body>
  <div id="loader"></div>

  <p id="re"></p>
</body>

<div align="center">
  <p> | All Rights Reserved</p>
</div>

【问题讨论】：

问题是什么？还有一点旁注：使用 jquery 时，您可以使用 $('#id') 而不是 document.getElementById('id') 我的问题是如何让它在移动设备上工作。谢谢！首先您应该将<form /> 和其他可见元素移动到正文中，因为如果将它们放入头部可能会失败。我建议阅读the documentation 并按照@floriangosse 所说的去做。 【参考方案1】：

首先，我对 jQuery mobile 不是很熟悉，但是我可以告诉你一些关于 HTML 文档的基础知识，也许你可以从那里开始：

您的 html 文档应如下所示：

<html>
<head>
   <<meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>


</head>
<body>

//Here will your html code be

</body>
</html>

将所有指向包含 jquery CDN- 链接的样式表和脚本标签的链接放在 head-tag 中。

我的建议是将 css 文件和 javascript 文件分开，而不是将所有内容都放在一个文档中，因为这样会变得非常非结构化和压倒性的。从一开始就保持你的代码干净，这样你以后就不必清理它，它会变得容易很多。

希望对您有所帮助！拉蒙

PS：没有不好的问题，每个人都是从某个地方开始的，当我开始时我问自己同样的事情，所以继续谷歌搜索哈哈！祝你好运！

【讨论】：