我的网站在本地托管时可以使用flex和bootstrap进行响应现在已在线托管，Flex无法在移动网站上运行

分类：编程问答

如何解决我的网站在本地托管时可以使用flex和bootstrap进行响应现在已在线托管，Flex无法在移动网站上运行

我是一名新的Web开发人员，并且有一个投资组合网站，托管在www.j-price.co.uk上。

从VSCode在本地托管站点时，它可以响应并运行良好，但是现在它是通过githubpages和goDaddy托管的，因此不会以相同的方式进行响应。它添加了一个垂直滚动条，并且以前相互堆叠的项目不再这样做。当我调整浏览器大小时，实时站点绝对不错，但是在Chrome Dev工具中实际上是在手机上对其进行测试是问题所在。

我尝试将<meta viewport width>更改为我认为是SO解决方案的各种其他选项，并在出现问题的情况下增加了浏览器的交叉兼容性。即

    .flex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    }

我不确定是否可以将其他内容添加到代码中，或者是否与托管代码有关？

这是我的HTML：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- SEO -->
<title></title>
<meta name="description"
    content="James is a Web Developer using HTML,CSS,Javascript and React to create awesome websites and applications.">
<!-- Site crawling ahrefs -->
<meta name="ahrefs-site-verification" content="91f4ecd594f0f445f56806289d4bec924c392e3823c8ad9a17f0a1da8c611042">
<!-- Add google -->
<meta name="google-site-verification" content="fSGSYoFZP8L9qhXbVk2xPbPupNPvIFW3eCkUA5yvmYU" />
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Font Awesome icons -->
<script src="https://kit.fontawesome.com/9e214becb6.js" crossorigin="anonymous"></script>
<!-- My Style -->
<link rel="stylesheet" href="https://jamesmp88.github.io/portfolio/style.css">
<!-- Staatliches font -->
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<!-- Roboto Font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- Emblema One Font -->
<link href="https://fonts.googleapis.com/css2?family=Emblema+One&display=swap" rel="stylesheet">
</head>

<body id="body">
<div class=" d-none d-md-block side-fix btn">
</div>
<header id="header" class="header">
    <nav class="navbar navbar-expand navbar-dark">
        <div class="px-auto">
            <a id="logo" class="navbar-brand" href="#">
                
            </a>
        </div>

        <!-- full navbar -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item px-2">
                    <a class="nav-link" href="#projects">Projects</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#contact">Contact</a>
                </li>
                </li>
            </ul>
        </div>
    </nav>

    <!-- hero div -->
    <div id="hero" class="col-6 m-auto text-center text-white focus-in-expand">
        <h3 class="focus-in-expand">Hi,I'm James <br> I'm a Web Developer <br> <span id="typedSentence"></span>
        </h3>
        <div class="socials text-center">
            <hr>
            <a class="fab px-2 fa-2x fa-github" target="_blank" rel="noreferrer noopener" href="https://github.com/jamesmp88"></a>
            <a class="fab px-2 fa-2x fa-twitter" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com"></a>
            <a class="fab px-2 fa-2x fa-linkedin" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com"></a>
            <button class=" mx-auto cv-btn">View CV</button>
            <hr>
        </div>
    </div>
</header>

<section id="projects" class="text-center focus-in-expand">
    <h1>Projects</h1>
    <div class="card-group col-10 mx-auto">
        
        <!-- Recipe -->
        <div class="card d-flex m-sm-2" id="card">
            <div class="card-image">
                <img class="card-img-top" src="https://jamesmp88.github.io/portfolio/Media/recipe.png" alt="Recipe Finder App">
                <div class="image-overlay m-auto">
                    <a href="https://jamesmp88.github.io/recipes" target="_blank" rel="noreferrer noopener">
                        <div class="d-flex-column justify-content-center h-100 my-auto">
                            <h3 class="mt-0 mt-md-2 mt-lg-5">Recipe Finder</h3>
                            <p class="m-0 m-sm-1 m-md-3 m-lg-4">Web App to find your perfect recipe. Built with React.js</p>
                            <div>
                                <a href="https://jamesmp88.github.io/recipes" target="_blank" class="btn live-site">Live Site</a>
                                <a href="https://github.com/jamesmp88/recipes" target="_blank" class="btn view-code">View Code</a>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
          
        </div>
        <div class="card d-flex m-sm-2" id="card">
            <div class="card-image">
              <img class="card-img-top" src="https://jamesmp88.github.io/portfolio/Media/gym.png" alt="Gym Landing Page">
              <div class="image-overlay m-auto">
                    <a href="https://jamesmp88.github.io/gym" target="_blank" rel="noreferrer noopener">
                        <div class="d-flex-column justify-content-center my-auto">
                            <h3 class="mt-0 mt-md-2 mt-lg-5">Jim's Gym</h3>
                            <p class="m-0 m-sm-1 m-md-3 m-lg-4">Gym landing page built with HTML,CSS and Bootstrap</p>
                            <div>
                                <a href="https://jamesmp88.github.io/gym" target="_blank" class="btn live-site">Live Site</a>
                                <a href="https://github.com/jamesmp88/gym" target="_blank" class="btn view-code">View Code</a>
                            </div>
                        </div>
                    </a>
              </div>
            </div>
          </div>
    
    </div>
</section>

<div class="diag-container">
    <div id="diagonal-2"></div>
</div>

<section id="about" class="text-center">
    <h1 class="text-center focus-in-expand mb-0 pb-3">About</h1>
    <div class="about-me mx-auto p-2 col-8 mb-5 backlight">
        <p> Hi there,I'm James and I'm a Web Developer living in London,UK.
            <br><br>
            Although mainly working with Front-End technologies at the moment,my ultimate goal is to be a
            well-rounded full-stack developer.
            <br><br>
            I have a real passion for building good-looking,excellently functioning websites and am more than
            willing to try my hand at just about anything.
            <br><br>
            Although I have been an Actor for the last few years I have always had a passion for the tech industry
            and a desire to understand how things worked 'under the hood'. I'm really excited that I'm getting the
            opportunity to explore that now!
            <br><br>
            Below are the technologies that I've been using recently to build projects.
        </p>
    </div>
    <div class="row about-container mx-auto">
        <div class="tech col-10 col-md-6 mx-auto pb-4">
            <h3 class="pb-2 pb-md-5">Technologies:</h3>
            <img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/HTML5_Logo.svg" alt="">
            <img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/css3.svg" alt="">
            <img class="tech-img white-background" src="https://jamesmp88.github.io/portfolio/Media/sass-1.svg" alt="">
            <img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/bootstrap-4.svg" alt="">
            <img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/javascript.svg" alt="">
            <img class="tech-img" src="https://jamesmp88.github.io/portfolio/Media/react.svg" alt="">
        </div>
        <div class="mx-auto h-50 col-12 col-md-3 text-center">
            <h3 class="mb-5">Tools</h3>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight w-100">Git + Github</p>
            </div>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight">WordPress</p>
            </div>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight">Chrome Dev Tools</p>
            </div>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight">Command Line/GitBash</p>
            </div>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight">NPM</p>
            </div>
            <div class="tool p-0 m-3 mx-auto">
                <p class="backlight">VS Code</p>
            </div>
        </div>
    </div>
</section>

<div class="diag-container">
    <div id="diagonal-3"></div>
</div>

<section id="contact" class="text-center">
    <h1 class="pt-0 focus-in-expand">Contact</h1>
    <div class="mb-0 col-12 col-lg-9 mx-auto">
        <a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://github.com/jamesmp88">
            <i class="fab px-3 fa-3x fa-github"></i>
            <p class="social-text">See my Code</p>
        </a>
        <a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://www.twitter.com/jamesP_Dev">
            <i class="fab px-3 fa-3x fa-twitter"></i>
            <p class="social-text">Follow me</p>
        </a>
        <a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href="https://www.linkedin.com/in/james-price-99b0691ba/">
            <i class="fab px-3 fa-3x fa-linkedin"></i>
            <p class="social-text">Link ?</p>
        </a>
        <a class="social-border mx-4" target="_blank" rel="noreferrer noopener" href='mailto:jamesmprice@hotmail.co.uk'>
            <i class="far px-3 fa-3x fa-envelope"></i>
            <p class="social-text">Email Me</p>
        </a>
    </div>
</section>

<script src="https://jamesmp88.github.io/portfolio/index.js"></script>

CSS：


    * {
    padding:0;
    margin: 0;
    box-sizing: border-box;
    font-family: staatliches,monospace;
    scroll-behavior: smooth;
    max-width: 100%;    
}

body {
    background-color: #403146;
}

p {
    margin: 0;
    font-family: 'Roboto',sans-serif;
}

header {
    height: 80vh;
    background-image: url('./Media/background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

h1 {
    padding: 2rem;
}

/* End of General */

/* Top HERO section */

#logo {
    transition: .8s ease-in-out;
    margin: 0;
}

/* logo above menu on mobile */
@media only screen and (max-width:425px) {
    #logo {
        display: block;
        text-align: center;
    }

    .navbar {
        display: block;
    }
}

#logo:hover{
    transform: rotate(360deg);
}

/* NAVBAR */

.navbar-collapse {
    justify-content: flex-end;
}

.navbar-toggler-icon {
    background-color: rgba(0,0);
}

#nav-link {
    color: white
}
/* End of NAVBAR */


#hero {
    padding: 5%;
}

h3 {
    font-size: 2rem;
}

.socials {
    margin-top: 5vh;
}

.fa-2x:hover {
    color: grey;
    text-decoration: none;
    transition: 0.3s;
}

.cv-btn {
    color:#d4849d;
    display: block;
    font-size: 1.5rem;
    transition-duration: 0.3s;
    padding: 0.5rem;
    border: none;
    background-color: transparent;
    border-radius: 10%;
    margin-top: 0.5rem;
}

.cv-btn:hover {
    background-color: rgb(128,123,0.2);
    color: white;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: auto;
}

/* EMAIL AT SIDE */

.side-fix {
    position: fixed;
    display: block;
    width: 10rem;
    transform: rotate(90deg);
    right: -5%;
    top: 20%;
    z-index: 10;
    padding-top: 20px;
}

.side-fix a {
    color: white;
    font-size: 1rem;
    white-space: nowrap;
    letter-spacing: 0.2rem;
    z-index: 10;
}

/* DIAGONALS */

.diag-container {
    width: 100vw;
    max-width: 100%;
    overflow: hidden;
    z-index: -10;
}

/* PROJECTS */

#projects {
    color: white;
    width: 100vw;
    margin: 0;
    background-color: #403146;
}

.card {
    box-shadow: 1px -2px 15px rgba(141,141,0.795);
    min-width: 40%;
    max-width: 90%;
    margin: auto;
}

@media only screen and (min-width: 575px) {
    .card {
        max-width: 60%;
    }
}

.live-site {
    white-space: nowrap;
    background-color: #00ad14;
    color: white;
    margin: 2px auto 2px;
    max-width: 50%;
}

.view-code {
    white-space: nowrap;
    background-color:#e00000;
    color: white;
    max-width: 50%;
    margin: 2px auto 2px;
}

.btn:hover {
    color: white;
}

/* Hover effect on projects */
.card-image {
    position: relative;
  }
  
  .image-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background: rgba(216,216,0.904);
      color: black;
    }
  
  .card:hover .image-overlay {
      opacity: 1;
    }

    .image-overlay .flex {
        bottom:0;
    }

    .image-overlay a {
        text-decoration: none;
        color: black;
    }
/* end of hover effect */

#diagonal-2 {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 100vw 50px 0;
  border-color: #403146 #403146 #c68f88 #c68f88;
  max-width: 100%;
  z-index: -10;
}

/* ABOUT */

#about {
    display: inline-block;
    background-color: #c68f88;
    color: black;
}

.about-me {
    background-color: white;
    border-radius: 5px;
    padding: 5px 5px 0;
    font-size: 2.5vw;
}

.white-background {
    background-color: rgb(30,19,61);
    padding: 5px;
    border-radius: 5px;
}

.tech-img {
    display: inline-block;
    width: 40%;
    margin: 2%;
}

@media only screen and (min-width: 576px) {
    .tech-img {
        width: 20%;
        margin: 15px;
    }

    .about-me {
        font-size: 3vh;
    }
}

.tool {
    width: 37vw;
    font-size: 2vw;
    display: block;
}

.tool p {
    font-family: staatliches,monospace;
    padding: 5px;
    border-radius: 2px;
}

@media only screen and (max-width: 765px ){
    .tool {
        font-size: 5.5vw;
        padding: 2vw;
    }
}

.backlight{
    background-color: rgba(255,255,240,0.678);
    border: 1px solid#403146;
    box-shadow: -0.1vw 0.2vw 1vw #403146;
}

/* DIAGONAL3 */

#diagonal-3 {
    max-width: 100%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 170px 100vw 0;
    border-color: #c68f88 #c68f88 #862f42 #862f42;
    transform: scale(1.0001);
    overflow: none;
    z-index: -10;
}

/* CONTACT */

#contact {
    color: white;
    background-color: #862f42;
    
}

.social-border {
    display: inline-block;
    border: 3px solid white;
    border-radius: 20%;
    padding: 1%;
    margin-bottom: 10%;
}

.social-text {
    font-family: staatliches,monospace;
}

.social-text:hover {
    text-decoration: none;
}

/* Font Awesome Icons */
.fab,.far,.social-text {
    color: white;
}

.social-border:hover {
    background-color: #834855;
    transition-duration: 0.5s;
    text-decoration: none;
}

/* Animations*/

/* FOCUS IN */

.focus-in-expand {
    -webkit-animation: focus-in-expand 2s cubic-bezier(0.250,0.460,0.450,0.940) both;
            animation: focus-in-expand 2s cubic-bezier(0.250,0.940) both;
}

@-webkit-keyframes focus-in-expand {
    0% {
      letter-spacing: -0.5em;
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes focus-in-expand {
    0% {
      letter-spacing: -0.5em;
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

和JS（以防万一）：

    
    // Set adjective
    const adjective = document.getElementById('adjective');
    const typedSentence = document.getElementById('typedSentence');

    const adjectives = ['Rugby','Coffee','Theatre','Guitars','Travelling','Books','IPA','Biscuits'];

    let currentIndex = 0;
    const intervalLength = 3000;
    let adj;

    const changeSentence = () => {
    typedSentence.innerHTML = '';
    adj = adjectives[(currentIndex++)%adjectives.length];
    let sentence = `I like ${adj}`;
    typedSentence.innerText = sentence;
    }

    changeSentence();
    setInterval(changeSentence,intervalLength);
    // End of Set Adjective

解决方法

我遇到了很多您要处理的问题。如果您编写自己的CSS时没有任何帮助程序，例如（语义，实体化），则通常不会遇到这些问题。这需要更多工作...但是最终您可以完全控制。我唯一使用的是带有链接的超棒字体图标。前期似乎让人头疼，但是您将花费更多的时间进行调试，而不是学习编写CSS。我一直在用我需要的所有要素来建立图书馆。导航栏，卡片，侧边栏，页脚等。将这些元素与CSS捆绑在一起后，生活会更轻松。我还建议使用ReactJS的快速响应能力以及可重复使用的组件系统来解决问题。

,

使用元标记

视口是用户在网页上的可见区域。随 设备-手机上的设备会比计算机上的设备小 屏幕。

您应该在所有网页中包含以下元素： 这为浏览器提供了有关如何控制页面的 尺寸和比例。

<meta name="viewport" content="width=device-width,initial-scale=1">
,

我认为我已经找到了主要问题，似乎是GoDaddy在通过屏蔽转发时将我的网站安装在iframe中。如果我不使用任何掩膜，而只是从我的自定义URL转发到我的github页面托管站点，则所有代码似乎都完整无缺，并且可以正常工作。这不是完美的解决方案，因为我的自定义网址看起来更专业，但至少网站应该按预期加载。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot