按鈕並不在移動版工作

這是我簡單的html代碼：按鈕並不在移動版工作

<p><a href="http://codepen.io/jundymek/" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>

它的工作原理我桌面上的罰款（我點擊按鈕，並將其重定向到鏈接）。當我在手機版上運行它時，按鈕不可點擊。爲什麼？我該如何解決這個問題？

整個代碼：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
     <title>Jundymek - portfolio</title> 
     <!-- Bootstrap --> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/mystyle.css" rel="stylesheet"> 
     <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> 
     <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> 
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
     <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
     <![endif]--> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
     <script type="text/javascript" src="js/myjs.js"></script> 
    </head> 
    <body> 
     <div class="container-fluid top fill" id="top"> 
      <nav class="navbar navbar-inverse navbar-fixed-top sticky"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         </button> 
         <a class="navbar-brand" href="#" style="color:#FF9422">jundymek</a> 
        </div> 
        <div class="collapse navbar-collapse" id="myNavbar"> 
         <ul class="nav navbar-nav"> 
          <li id='1' class="active"><a href="#top">Home</a></li> 
          <li id='2' ><a href="#middle">Portfolio</a></li> 
          <li id='3' ><a href="#contact">Contact</a></li> 
         </ul> 
         <ul class="nav navbar-nav navbar-right"> 
          <li><a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-2x color" aria-hidden="true"></i></a></li> 
          <li><a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-2x color" aria-hidden="true"></i></a></li> 
          <li><a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-2x color" aria-hidden="true"></i></a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
      <div class="vertical-center"> 
       <img class="img-responsive center-block" src="images/html_icons.png" id="icons" alt="" 
       width="140px"> 
       <h1 class="text-center" style="margin: 10px 0 0 0">jundymek</h1> 
       <div class="terminal text-center" style="color: #00fd55;font-size:30px; font-family: 'Courier'"></div> 
       <h3 class="text-center">Sample portfolio page for <a href="https://www.freecodecamp.com">FreeCodeCamp.com</a> course</h3> 
      </div> 
     </div> 
     <div class="container-fluid middle fill" id="middle"> 
      <h1 class="text-center">Portfolio - my sample 
      projects</h1> 
      <div class="row"> 
       <div class="col-xs-6 col-sm-3"> 
        <div class="thumbnail"> 
         <figure class="snip1091 navy"><img src="http://ballislife.com/wp-content/uploads/2012/12/Jordan.jpg" alt="jordan"/> 
          <figcaption> 
          <h2>MJ <span>Tribute Page</span></h2> 
          </figcaption><a href="http://codepen.io/jundymek/full/JEwbzN/" 
          target="_blank"></a> 
         </figure> 
         <div class="caption"> 
          <h3>MJ Tribute Page</h3> 
          <p class="captions">Page about the best NBA player in history.</p> 
          <p><a href="http://codepen.io/jundymek/full/JEwbzN/" 
          target="blank" class="btn btn-primary btn-responsive" 
          role="button">Check this site</a></p> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-6 col-sm-3"> 
        <div class="thumbnail"> 
         <figure class="snip1091 navy"><img src="images/wawa_busy.png" alt="wawabusy"/> 
          <figcaption> 
          <h2>Wawabusy <span>.pl</span></h2> 
          </figcaption><a href="http://www.wawabusy.pl" target="_blank"></a> 
         </figure> 
         <div class="caption"> 
          <h3>Wawabusy.pl</h3> 
          <p class="captions">One of my websites. Do you want to rent a minibus in Poland?;)</p> 
          <p><a href="http://www.wawabusy.pl" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-6 col-sm-3"> 
        <div class="thumbnail"> 
         <figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/> 
          <figcaption> 
          <h2>Future <span>project</span></h2> 
          </figcaption><a href="#"></a> 
         </figure> 
         <div class="caption"> 
          <h3>Future project</h3> 
          <p class="captions">There will be link to my next project.</p> 
          <p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p> 
         </div> 
        </div> 
       </div> 
       <div class="col-xs-6 col-sm-3"> 
        <div class="thumbnail"> 
         <figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/> 
          <figcaption> 
          <h2>Future <span>project</span></h2> 
          </figcaption><a href="#"></a> 
         </figure> 
         <div class="caption"> 
          <h3>Future project</h3> 
          <p class="captions">There will be link to my next project.</p> 
          <p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p> 
         </div> 
        </div> 
       </div> 
       <div class="col-sm-12"> 
        <h3 class="text-center">My skills: </h3> 
        <div class="row text-center" style="margin-top:30px"> 
         <div class="image-skills"> 
          <img class="img-responsive" src="images/django.png" 
          width="140px"alt="django"> 
         </div> 
         <div class="image-skills"> 
          <img class="img-responsive" src="images/python.png" 
          width="140px" alt="python"> 
         </div> 
         <div class="image-skills"> 
          <img class="img-responsive" src="images/git.png" 
          width="140px" alt="git"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="container-fluid top contact" id="contact"> 
      <h1 class="text-center">Contact</h1> 
      <div class="row"> 
       <div class="col-sm-6"> 
        <form> 
         <div class="row"> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label class="form-label" for="name">Your name</label> 
            <input type="text" class="form-control" id="name" placeholder="Enter your name"> 
           </div> 
          </div> 
          <div class="col-md-6"> 
           <div class="form-group"> 
            <label class="form-label" for="name">Email</label> 
            <input type="email" class="form-control" id="email" placeholder="Enter your email adress" style="color:white"> 
           </div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-md-12"> 
           <div class="form-group"> 
            <label class="form-label" 
            for="message">Message</label> 
            <textarea class="form-control" placeholder="Leave a message..." rows="5"></textarea> 
           </div> 
          </div> 
         </div> 
         <input type="submit" class="btn btn-success btn-responsive" value="Send message"> 
        </form> 
       </div> 
       <div class="col-sm-6"> 
        <h3 class="text-center">Connect with me</h3> 
        <div class="text-center"> 
         <a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-4x color" aria-hidden="true"></i></a> 
         <a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-4x color" aria-hidden="true"></i></a> 
         <a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-4x color" aria-hidden="true"></i></a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
     <!-- Include all compiled plugins (below), or include individual files as needed --> 
     <script src="js/bootstrap.min.js"></script> 
     <script src="js/typewriting.js"></script> 
    </body> 
</html>

有一個在我的網站另一個奇怪的問題。當我縮小窗口大小時，我的縮略圖圖像的一部分不可點擊。只有圖像的頂部被視爲鏈接。我不知道爲什麼。任何想法？

來源

2017-02-19 jundymek

發佈所有相關代碼 – ZimSystem

我粘貼了我的index.html。 – jundymek

這真的很奇怪，但我想你可以做的是創建一個實際的按鈕，將打開鏈接而不是鏈接。

<input type="button" value="Check this site" onclick="window.open('http://www.google.pl', '_blank');" />

我希望這對你有效。

來源

2017-02-19 15:09:56

不起作用。按鈕在移動視圖中不可點擊。 – jundymek

您如何測試移動視圖，因爲它對我有用？ –

我將「我的技能」區域移至另一行。現在它工作正常。 – jundymek

根據Rishi的回答，我做了一點search。它表明你應該使用touchstart事件。

有關MDN docs的更多信息。

來源

2017-02-19 18:12:11 RompePC

請嘗試使用下面的代碼。我已經加入chklink類的按鈕，並在劇本我打電話的事件觸發功能

 <div class="caption"> 
           <h3>MJ Tribute Page</h3> 
           <p class="captions">Page about the best NBA player in history.</p> 
           <p><a href="#" 
           target="blank" class="btn btn-primary btn-responsive chklink" 
           role="button">Check this site</a></p> 
          </div> 

<script> 
    $(document).on("click touchStart",".chklink",function(){ 
    window.open('http://codepen.io/jundymek/full/JEwbzN/', '_blank'); 
    }); 
</script>

來源

2017-02-19 18:27:56 GSB

它只能在正常窗口中使用。當我將其調整爲手機尺寸（低於760像素）時，按鈕不響應。 – jundymek

這是引導問題。當我刪除我的bootstrap.css文件時，我可以調整窗口大小並且一切正常（當然除了樣式）。 – jundymek

我感動

   <div class="col-sm-12"> 
       <h3 class="text-center">My skills: </h3> 
       <div class="row text-center" style="margin-top:30px"> 
        <div class="image-skills"> 
         <img class="img-responsive" src="images/django.png" 
         width="140px"alt="django"> 
        </div> 
        <div class="image-skills"> 
         <img class="img-responsive" src="images/python.png" 
         width="140px" alt="python"> 
        </div> 
        <div class="image-skills"> 
         <img class="img-responsive" src="images/git.png" 
         width="140px" alt="git"> 
        </div> 
       </div> 
      </div>

到另一行。一切都如現在一樣。

來源

2017-02-20 00:18:17 jundymek

這已被多次回答。快速回答：

你可以使用'touchstart'和jquery。（'＃button1'）。on（'touchstart click'，function（）{/ * code here * /}）;

來源

2017-04-09 19:27:22 karmafunk

按鈕並不在移動版工作

回答

相關問題