自适应网站可在浏览器开发人员工具中运行，但无法在手机上正确缩放

Question

我最近首次使用flex box为学校项目创建了该网站。我主要在firefox中使用响应式设计模式来处理它，没有问题。但是，当我将该站点上传到服务器并在其上查看我的手机时，正文仅占页面的三分之一，底部图像非常失真。我想知道是否有人对造成这种情况有任何想法？这里是链接https://web.gccaz.edu/~dor2174998/CIS233DA/famous/alanWatts.html，对不起我的草率CSS。

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
document.getElementById("myBtn").addEventListener("click", topFunction, false);

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

/* reset styles */

@font-face {
  font-family: GothamBold;
  src: url("fonts/GothamBold.ttf") format("truetype");
}

@font-face {
  font-family: Digitalt;
  src: url("fonts/Digitalt.ttf") format("truetype");
}

html {
  font-size: 16px;
  font-family: "Josefin Sans", Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a,
article,
body,
dd,
div,
dl,
dt,
figcaption,
figure,
footer,
header,
h1,
h2,
h3,
img,
li,
nav,
ol,
p,
section,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul {
  border: 0;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

ol,
ul {
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h2 {}

.menu {
  width: 100%;
  background-color: white;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.logo {
  height: 40px;
  padding: 5px;
}

.hamburger-menu {
  height: 40px;
  padding: 5px;
}

.navigation li {
  display: inline;
  padding-right: 20px;
  font-family: GothamBold;
}

.navigation {
  display: none;
  align-self: center;
}

.heading {
  width: 100%;
  text-align: left;
  padding: 1%;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(to bottom right, #1a1a1a, #404040);
}

form.subscribeForm {
  position: relative;
  z-index: 100;
}

form.subscribeForm input[type=text] {
  font-size: 1.3rem;
  width: 80%;
  height: 30px;
  border: 2px solid black;
  text-align: center;
  margin: 2%;
  box-shadow: inset 1px 1px 4px black;
  -moz-box-shadow: inset 1px 1px 4px black;
  -webkit-box-shadow: inset 1px 1px 5px black;
}

form.subscribeForm input[type=submit] {
  font-size: 2rem;
  font-family: Digitalt;
  text-align: center;
  width: 65%;
  line-height: 120%;
  margin-bottom: 5%;
  margin-top: 3%;
  border: 2px solid black;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  background-color: white;
}

.page {
  display: flex;
  flex-wrap: wrap;
  background: black;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.alanWatts {
  margin: 0 auto;
  max-width: 850px;
}

#myBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 10px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  transform: rotate(180deg);
  width: 60px;
  height: 60px;
  opacity: 0.5;
}

.page-nav li {
  list-style-type: decimal;
  font-family: GothamBold;
}

.page-nav h2 {
  font-size: 1.8rem;
}

.content {
  background-color: white;
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 20px;
  text-align: left;
}

.content p {
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.content h3 {
  margin-bottom: 15px;
  font-size: 1.6rem;
}

.content ul {
  list-style-type: disc;
  font-size: 1.1rem;
  margin: 0 15px 30px 30px;
}

.content li {
  margin-top: 10px;
}

.sign-up {
  color: white !important;
}

.tabletHeader {
  display: none;
}

.sign-up-paragraph-relocated,
.sign-up-paragraph {
  display: none;
}

.sign-up-container h3 {
  font-family: Digitalt;
  font-size: 2rem;
  padding: 2%;
}

.sign-up-container p {
  font-size: 1.4rem;
  margin: 0 2%;
}


/* Mobile Styles */

@media only screen and (max-width: 400px) {
  form.subscribeForm input[type=text] {
    width: 250px;
    margin-bottom: 5%;
  }
  form.subscribeForm input[type=submit] {
    width: 200px;
  }
  .sign-up {
    color: white !important;
  }
  .sign-up-container {
    background-size: 100%;
    background: url("images/signupCrop.jpg") no-repeat center;
    background-size: cover;
    text-align: center;
    padding-bottom: 20%;
    padding-top: 18%;
  }
  .sign-up-container h3 {
    font-family: Digitalt;
    font-size: 2rem;
  }
  .sign-up-container p {
    font-size: 1.4rem;
    margin: 0 2% 5%;
  }
  .sign-up-paragraph {
    display: block;
  }
}

@media only screen and (min-width: 401px) and (max-width: 500px) {
  .mainHeader {
    display: none;
  }
  .tabletHeader {
    display: block;
  }
}

@media only screen and (min-width: 401px) and (max-width: 560px) {
  form.subscribeForm input[type=text] {
    font-size: 0.95rem;
  }
}

@media only screen and (min-width: 677px) {
  .sign-up-paragraph {
    display: block;
  }
}

@media only screen and (min-width: 401px) and (max-width: 676px) {
  .sign-up-paragraph-relocated {
    display: block;
  }
}

@media only screen and (min-width: 610px) and (max-width: 960px) {
  form.subscribeForm input[type=text] {
    width: 250px;
  }
  form.subscribeForm input[type=submit] {
    width: 200px;
  }
}

@media only screen and (min-width: 780px) {
  .logo {
    height: 50px;
  }
  .navigation {
    display: block;
  }
  .hamburger-menu {
    display: none;
  }
}


/* Tablet Styles */

@media only screen and (min-width: 401px) and (max-width: 960px) {
  .sign-up,
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 50%;
    max-width: 85%;
  }
  .sign-up {
    color: white !important;
    background-size: 100%;
    background: url("images/signupCrop.jpg") no-repeat center;
    background-size: cover;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sign-up-container {
    background: none;
  }
  .sign-up-container h3 {
    font-family: Digitalt;
    font-size: 2rem;
    padding: 2%;
  }
  .sign-up-container p {
    font-size: 1.4rem;
    margin: 0 2%;
  }
}


/* Desktop Styles */

@media only screen and (min-width: 961px) {
  .page {
    max-width: 1366px;
    margin: 0 auto;
  }
  .content {
    padding-left: 100px;
    padding-right: 100px;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .sign-up {
    height: 300px;
    width: 100%;
    background: url("images/signupWideV2.jpg") no-repeat center;
    background-size: cover;
    /* or contain depending on what you want */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sign-up-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sign-up-container-text {
    width: 50%;
  }
  .sign-up-container h3 {
    font-size: 2.1rem;
  }
  .sign-up-container p {
    font-size: 1.5rem;
  }
  form.subscribeForm input[type=submit] {
    width: 200px;
  }
  form.subscribeForm input[type=text] {
    width: 250px;
  }
  .header {
    height: 400px;
  }
}

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

<head>
  <title>Responsive Design</title>
  <meta charset='utf-8' />
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link rel='stylesheet' href='styles.css' />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class='menu'>
    <img class="logo" src='images/rsz_logo.jpg' />
    <img class="hamburger-menu" src='images/menu.svg' />
    <nav class="navigation">
      <ul>
        <li>Actors</li>
        <li>Artists</li>
        <li>Athletes</li>
        <li>Economist</li>
        <li>Philosophers</li>
        <li>Other</li>
      </ul>
    </nav>
  </div>
  <div class='page'>
    <img class="alanWatts" src='images/famousPersonPhoto.jpg' />
    <img id="myBtn" src='images/scroll-up.png' />
    <div class='content'>
      <nav class="page-nav">
        <h2>Content</h2>
        <ul>
          <li><a href="#section1">Childhood &amp; Early Life</a></li>
          <li><a href="#section2">Career</a></li>
          <li><a href="#section3">Major Works</a></li>
          <li><a href="#section4">Personal Life &amp; Legacy</a></li>
        </ul>
      </nav>
      <p>Alan Watts was a well-known British philosopher, writer and speaker, best known for his interpretation of Eastern philosophy for Western audiences. Born to Christian parents in England, he developed interest in Buddhism while he was still a student
        at King’s School, Canterbury. Subsequently, he became a member of Buddhist Lodge, where he met many scholars and spiritual masters, who helped him to shape his ideas.</p>
      <p>He was a prolific writer and began writing at the age of fourteen. Many of his early works were published in the journal of the Lodge. At the age of twenty three, he migrated to the USA, where he first received training under Zen master, but left
        before he was ordained. He then studied Christian scriptures and functioned as a priest at Chicago for six years before leaving for San Francisco to pursue an academic career. Simultaneously, he started giving talks on Eastern philosophy and soon
        developed a wide audience both at home and abroad. Apart from writing more than 25 books, he has also left an audio library of nearly 400 talks, which are still in great demand.</p>
      <h3 id="section1">Childhood &amp; Early Life</h3>
      <ul>
        <li>Alan Wilson Watts was born on 6 January 1915 in Chislehurst village in Kent, now south-east London. His father, Laurence Wilson Watts, was an employee of Michelin Tyre Company while his mother, Emily Mary Watts (née Buchan), was a homemaker.</li>
        <li>As the only child of his parents, Alan grew up playing alone by the brook, learning to identify wildflowers and butterflies. Another factor that had an immense influence on his upbringing was his mother’s family, which was religiously inclined.</li>
        <li>Even at an early age, he had a special attraction for China and Japan. Romantic tales from Far East interested him a lot. Once some missionaries returning from China, presented a few Far Eastern paintings and embroideries to his mother. Although
          very young he was highly intrigued with them.</li>
        <li>Alan Watts began his education at the kindergarten school of Saint Nicolas and then went to King's School in Canterbury. Apart from academics, the school also provided religious training under Muscular Christianity; but Alan found them rather
          grim. However, he excelled academically throughout the school years.</li>
        <li>While he was still a school student, he went on a trip to France with Francis Croshaw, a wealthy Epicurean who first aroused his interest in Buddhism. He then began to read about the religion and subsequently became a member of London Buddhist
          Lodge, now known as Buddhist Society.</li>
        <li>After finishing his general studies at the age of fifteen, he took up modern history, aiming for a scholarship at the Trinity College Oxford. He wanted to study philosophy, but there was no scope for that. He was also selected the senior prefect,
          Captain of his house.</li>
        <li>Unfortunately, he missed the scholarship and left the school one term before the end of the academic year. Not having the financial means to study further, he secured a job first at a printing house and later at a bank.</li>
        <li>At the same time, he began spending his spare time at the Buddhist Society. Here he read widely on philosophy, history, psychology, psychiatry and Eastern wisdom. Although he received advices from Dimitrije Mitrinović and Christmas Humphreys,
          he was mostly self-educated.</li>
      </ul>
      <h3 id="section2">Career</h3>
      <ul>
        <li>In 1931, at the age of sixteen, Watts was made the Secretary of the Buddhist Lodge. Sometime during this period, he also came in contact with spiritual authors like, Dr. Sarvapalli Radhakrishnan, Nicholas Roerich and Alice Bailey and imbibed a
          lot from them.</li>
        <li>In 1932, at the age of seventeen, he published his first book, ‘An Outline of Zen Buddhism’. It was actually a 32 page pamphlet, but was highly appreciated by the scholars and is still in print. By and by, he became the editor of ‘Buddhism in
          England’.</li>
        <li>In 1936, he attended the World Congress of Faiths at the University of London, where he met Daisetsu Teitaro Suzuki, esteemed scholar of Zen Buddhism. He had already read his works; the meeting fascinated him to a great extent.</li>
        <li>Also in 1936, he published his second book; ‘The Spirit of Zen: A Way of Life, Work and Art in the Far East’. It was followed by ‘The Legacy of Asia and Western Man’ (1937).</li>
        <li>In 1938, he left England for the United States of America with his family. Initially they settled in New York, where he began his formal training in Zen Buddhism. Unfortunately, he could not adapt to his teacher’s method and so he left without
          being ordained as a Zen monk.</li>
        <li>Looking for a vocational outlet for his spiritual inclinations, he joined Seabury-Western Theological Seminary, an Episcopal (Anglican) school in Evanston, Illinois. Here he studied Christian scriptures, theology, and church history. </li>
        <li>In 1945, on receiving his master’s degree from the seminary, he became an Episcopal priest and joined the Northwestern University at Chicago as its chaplain. He was very popular among the students, who joined him in a spirited discussion on Christian
          as well as Eastern philosophy.</li>
        <li>During his stay at Chicago, Watts wrote three books on Christian mysticism. However, he found it very hard to reconcile his Buddhist beliefs with Christian doctrines. Moreover, he got entangled in an extramarital relationship. So he left Chicago
          and in early 1951, shifted to San Francisco.</li>
        <li>At San Francisco, he joined the American Academy of Asian Studies as faculty and met many international scholars. He was especially influenced by Saburō Hasegawa, the well-known Japanese painter, from whom he learned a lot about Japanese art,
          customs as well as their perception of nature.</li>
        <li>He also seized the opportunity to learn Chinese language as well as Chinese brush calligraphy. Apart from that, he studied many other subjects ranging from Vedanta to quantum mechanics and cybernetics.</li>
        <li>Later, Watts became the Dean of the Academy. From now on, he began to give regular talks on the KPFA, free radio station at Berkeley. His talks attracted a wide range of audience. At the same time, he continued writing and in 1957, published his
          bestselling book, ‘The Way of Zen’.</li>
        <li>Sometime now, he also started experimenting with psychedelic drugs and its effect on mystical insight. He began by taking mescaline. Next in 1958, he worked with several other researchers on LSD, taking the drugs several times. Later he worked
          with marijuana and wrote about their effects in his forthcoming books.</li>
        <li>In 1958, Watts went on a tour to Europe. On returning to San Francisco, he recorded two seasons of a television series titled 'Eastern Wisdom and Modern Life' on KQED television channel.</li>
        <li>From early 1960s, he went to Japan several times. Also from 1962 to 1964, he had a fellowship at Harvard University and in 1968, became a scholar at San Jose State University. In fact, by the late 1960s, he had become a counterculture celebrity
          with many followers as well as critics.</li>
        <li>Soon he began travelling widely to speak at universities and growth centers across the US and Europe and by early 1970s, he became the most important interpreter of Eastern thoughts in the Western world.</li>
      </ul>
      <h3 id="section3">Major Works</h3>
      <ul>
        <li>Alan Watts was a prolific writer and had written more than 25 books. Among them, ‘Way to Zen’ is the most significant. Published in 1957, the book focuses on philosophical explanation as well as history of Zen Buddhism as practiced in China and
          India. It quickly became a bestseller and made him more popular.</li>
        <li>His some other significant works are ‘The Spirit of Zen’ (1936), ‘The Legacy of Asia and Western Man’ (1937), ‘The Meaning of Happiness’ (1940), ‘Psychotherapy East and West’ (1961) and ‘The Joyous Cosmology – Adventures in the Chemistry of Consciousness’
          (1962).</li>
        <li>The Meaning of Happiness (1940)</li>
      </ul>
      <h3 id="section4">Personal Life &amp; Legacy</h3>
      <ul>
        <li>Alan Watts was thrice married. In 1936, he met Eleanor Everett at the Buddhist Lodge and got married in April 1938. Their eldest daughter Joan was born in November 1938 and the younger daughter Anne in 1942.</li>
        <li>Towards the end of 1940s, Watts became entangled with an extramarital affair with Jean Burden; as a result Eleanor had their marriage annulled. Although he never married Jean, she remained in his thought till the end. He also kept in touch with
          his mother-in-law Ruth Fuller Everett.</li>
        <li>In 1950, Watts married Dorothy DeWitt. They had five children; Tia, Mark, Richard, Lila, and Diane. The marriage ended when in early 1960s Watts met Mary Jane Yates King while on a lecture tour to New York. The divorce was granted in 1964 and
          Watts and King got married in the same year.</li>
        <li>Until the middle of 1960s Watts lived with King in Sausalito, California. Subsequently, he began to divide his time between Sausalito and Druid Heights, located on the southwest flank of Mount Tamalpais. Here he lived in a secluded cabin. At the
          same time, he continued with his lecture trips.</li>
        <li>In October 1973, he returned from one such trip to Europe and put up at his cabin in Druid Heights. There he died in sleep on 16 November 1973. His body was cremated and half of the ashes were buried near his library at Druid Heights while the
          other half at the Green Gulch Monastery.</li>
        <li>Watts has left around 25 books as well as an audio library of nearly 400 talks, which carry his legacy to this day. To cater to their ever-increasing demand, his books are not only being republished now, copies of his audio lectures are also being
          published in written format.</li>
        <li>Saybrook University in the USA offers a course on Watts. This University has also created Watts academic chair.</li>
      </ul>
    </div>
    <div class="heading">
      <h2>Recently Added Bio's</h2>
      <p class="sign-up-paragraph-relocated">Subscribe to our newsletter to get the latest content and many other special perks, such as deciding what biographies we should do next.</p>
    </div>
    <img class='feature-1' src='images/Mark_Twain.jpg' />
    <img class='feature-2' src='images/Albert_Einstein.jpg' />
    <img class='feature-3' src='images/Karl_Marx.jpg' />
    <div class='sign-up'>
      <div class="sign-up-container">
        <div class="sign-up-container-text">
          <h3 class="tabletHeader">Subscribe <br> To Our Newsletter!</h3>
          <h3 class="mainHeader">Subscribe To Our Newsletter!</h3>
          <p class="sign-up-paragraph">Subscribe to our newsletter to get the latest content and many other special perks, such as deciding what biographies we should do next.</p>
        </div>
        <form class="subscribeForm">
          <input type="text" id="email" name="email" placeholder="address@example.com">
          <input type="submit" value="Sign Up">
        </form>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Answer 1

它在viewport元标记中。在这里，查看我在开发工具中所做的更改的以下屏幕截图：

我删除了“初始比例”声明，并从“ devicewidth”中删除了连字符

Answer 2

我可以通过删除身体的display flex属性并尽可能使用float属性来解决我的网站在手机上无法正常显示的问题。由于flex box在跨浏览器兼容性方面不那么可靠。