文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使我们的网页i移动浏览响应？

问如何使我们的网页i移动浏览响应？
EN

Stack Overflow用户
提问于 2021-05-01 08:17:04
回答 3查看 124关注 0票数 0

我遇到了一个问题，我的网页在桌面视图中反应正常，但是当我试图在moto g4设备web开发文本上查看它时，我想让它在moto g4视图中成为中心，当我在moto设备上查看时，如何使它中心。

index.html

这是我的index.html页面，在这里我写了我的全部代码

代码语言：javascript
复制
<!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.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <title>Website</title>

</head>

<body>

  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm p-3 mb-5"
    style="background-color: #cadefc !important; color:#798777;">
    <div class="container">
      <a class="navbar-brand" href="index.html">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
        style="border: none;">
        <i class="fas fa-bars"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="index.html">Home </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#service">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="price.html">Price</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="team.html">Our Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Navbar End -->



  <!-- banner start -->
  <section class="banner p-5" style="background-color:#f7f7f9">
    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6" data-aos="fade-up" data-aos-duration="3000">

          <img src="./img/1.1.svg" style="width: 100%;">
        </div>
        <div class="col-lg-6 mt-5 text-center">
          <h1 class="text-center">Web Development</span></h1>
          <h5 class="text-center" style="color: lightslategray;">In This digital world if you want to stay ahead
            of your competitors no doubt you need a website.</h5>
          <a href="web.html"><button class=" btn btn-warning border-radius-10" data-aos="fade-right"
              data-aos-duration="2000"
              style="background-color:#cadefc; box-shadow: 0 3px 3px #c3bef0; color: #000; border-color: #c3bef0;">Learn
              More</button></a>
        </div>
      </div>
    </div>
  </section>
  <!-- banner end -->
  <!-- extra header div start -->


  <!-- footer start -->
  <div class="footer bg-dark">
    <p class="text-center text-white mb-0 p-3">© 2021 abc solution All rights reserved.</p>
  </div>
  <!-- footer end -->


  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>
html
css
bootstrap-4
EN

回答 3

Stack Overflow用户

发布于 2021-05-01 08:40:31

删除一个错误：</span>标记，并向<h1>的父级添加一个p-0，也就是说，<div>标记给我带来了麻烦。不必要的填充不会对大屏幕造成太大的影响，但是它们会在较小的屏幕上产生影响，所以我删除了padding

​

代码语言：javascript
复制
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <title>Website</title>

</head>

<body>

  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm p-3 mb-5"
    style="background-color: #cadefc !important; color:#798777;">
    <div class="container">
      <a class="navbar-brand" href="index.html">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
        style="border: none;">
        <i class="fas fa-bars"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="index.html">Home </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#service">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="price.html">Price</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="team.html">Our Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Navbar End -->



  <!-- banner start -->
  <section class="banner p-5" style="background-color:#f7f7f9">
    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6" data-aos="fade-up" data-aos-duration="3000">

          <img src="./img/1.1.svg" style="width: 100%;">
        </div>
        <div class="col-lg-6 mt-5 p-0 text-center">
          <h1 class="text-center">Web Development</h1>
          <h5 class="text-center" style="color: lightslategray;">In This digital world if you want to stay ahead
            of your competitors no doubt you need a website.</h5>
          <a href="web.html"><button class=" btn btn-warning border-radius-10" data-aos="fade-right"
              data-aos-duration="2000"
              style="background-color:#cadefc; box-shadow: 0 3px 3px #c3bef0; color: #000; border-color: #c3bef0;">Learn
              More</button></a>
        </div>
      </div>
    </div>
  </section>
  <!-- banner end -->
  <!-- extra header div start -->


  <!-- footer start -->
  <div class="footer bg-dark">
    <p class="text-center text-white mb-0 p-3">© 2021 abc solution All rights reserved.</p>
  </div>
  <!-- footer end -->


  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

​

票数 2
EN

Stack Overflow用户

发布于 2021-05-01 08:27:45

在您所引用的<span>元素中有一个关闭的<span>标记，而它没有打开的<span>标记。

代码语言：javascript
复制
<h1 class="text-center">Web Development</span></h1>

应：

代码语言：javascript
复制
<h1 class="text-center">Web Development</h1>
票数 1
EN

Stack Overflow用户

发布于 2021-05-01 11:50:46

我通常在JavaScript中这样做

密码是:-

代码语言：javascript
复制
 var ismobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

If(ismobile)
{
    //Code here
}

变量是可移动的，它将识别正在使用移动或pc的用户，如果您只在移动设备上使用，那么您将在其中编写的代码。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/67344209

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档