为什么这两个网页上的像素在同一设备上显示不同的大小？

Question

我正在为我在学习编码的同时从事的一些项目制作一个文件夹。我已经在每个项目的网页顶部添加了一个横幅，但我遇到了一个网站没有响应的问题(Jubilee Austen页面)。

使用Chrome Inspector工具，它显示横幅有55px高，但它看起来比另一个项目页面(Rogue Pickings页面)上的要小，在另一个项目页面上，横幅的高度也是55px。这怎么可能呢？

Jubilee Austen page

Rogue Pickings page

有没有人知道我如何解决这个问题，使两个横幅显示相同的高度？

提前谢谢你！

​

/* ===== JUBILLEE AUSTEN ===== */

     font-family: atelas;
     src :url('../fonts/atelas/atelas.ttf') format('opentype');
   }


   /* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
   .back {
     width: 100%;
     background-color: #1D2120;
     padding: 10px 0;
     position: fixed;
     top: 0px;
   }
   .div-link {
     position:absolute;
     width:100%;
     height:100%;
     top:0;
     left: 0;
     z-index: 1;
     background-image: url('empty.gif');
   }
   .back-wrap {
     width: 90%;
     margin: auto;
   }
   .chevron {
     margin: 0;
   }
   .chevron img {
     width: 35px;
     float: left;
     margin-right: 1.5%;
   }
   .back-text {
     margin: 0 0 0 3%;
     font-family: atelas;
     font-size: 6em;
     color: #e2e2e2;
     text-decoration: none;
     line-height: 0.8;
     display: none;
   }
   #example {
     clear: both;
     padding-top: 50px;
   }


   /* ======== ORIGINAL CSS ======== */

   /* -------- START OF ORIGINAL CSS -------- */

   body {
     font-family: 'Source Sans Pro', sans-serif;
   }

   #about, #work, #contact {
     height: 600px;
   }

   /***** GRID *****/

   .full-width {
     width: 1200px;
     margin: 0 auto;
   }
   .half-width {
     width: 600px;
     float: left;
   }
   .third-width {
     width: 400px;
     float: left;
   }

   /***** HEADER *****/

   header {
     height: 800px;
     background: url('../img/hero.png');
     background-size: cover;
   }

   header h1 {
     padding: 50px 0;
     font-family: 'Lora', serif;
     font-size: 30px;
     color: #BBC085;
     padding-left: 80px;
   }
   #nav {
     float: right;
     padding: 75px 0;
   }
   nav ul li {
     display: inline-block;
   }
   nav ul li a {
     text-transform: uppercase;
     text-decoration: none;
     font-size: 18px;
     color: #828282;
     padding-left: 80px;
   }
   header h2 {
     width: 1000px;
     clear: both;
     font-family: 'Lora', serif;
     font-size: 72px;
     line-height: 80px;
     color: #9a9a9a;
     padding: 20px 0 0 80px;
   }
   header h2 span {
     color: #262a2b
   }

   /***** ABOUT *****/

   #about .full-width {
     padding: 80px 0;
   }

   #about h2 {
     font-family:'Lora', serif;
     font-size: 36px;
   }
   #about p {
     font-size: 21px;
     color: #7F7F7F;
     line-height: 42px;
     padding-right: 50px;
   }

   /***** WORK *****/

   #work {
     background: #F9CEB7;
     text-align: center;
   }

   #work .full-width {
     padding: 115px 0;
   }

   #work img {
     padding-bottom: 30px;
   }

   #work h3 {
     font-size: 24px;
     width: 180px;
     margin: 0 auto;
   }

   #work p {
     font-family: 'Lora', serif;
     font-size: 18px;
     line-height: 30px;
     color: #262a2b;
     padding: 0 35px;
   }

   /**** CONTACT *****/
   #contact {
     background: #EBEBEB;
   }

   #contact .full-width {
     padding: 110px 0;
   }

   #contact img#contact-img {
     border: 16px solid #ffffff;
   }

   #contact h2, #contact #email-header, #contact #socialmedia-header, #contact ul {
     padding-left: 115px;
   }

   #contact #envelope {
     padding: 0 10px 0 115px;
   }

   #contact h2 {
       font-family: 'Lora', serif;
       font-size: 36px;
   }
   #contact #email-header{
       font-size: 32px;
       font-weight: 400;
       margin: -30px 0 5px 0;
   }
   #contact #socialmedia-header {
       font-weight: bold;
       font-size: 29px;
       margin: 40px 0 0px 0;
   }
   #contact a {
       text-decoration: none;
       color: #C49075;
       font-weight: bold;
       font-size: 28px;
   }

   #contact ul {
     list-style: none;
   }

   #contact ul li {
     display: inline-block;
   }

   #contact ul img {
     font-size: 32px;
     padding-right: 48px;
   }

   /* ======== END ORIGINAL CSS ======== */





   /* TABLET */

   @media all and (min-width: 768px) {

    }


    @media screen and (min-width: 940px) {

      /* -------- PORTFOLIO BANNER CSS -------- */
      .chevron img {
        width: 30px;
      }
      .back-text {
        font-size: 3em;
      }
    }

<!doctype html>
<!-- JUBILEE AUSTEN -->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Jubilee Austen | Developer</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">

        <!-- FONTS -->
        <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>

    </head>

    <body>

      <!-- PORTFOLIO BANNER -->

      <section class="back">
        <a class="div-link" href="../index.html"><span></span></a>
        <div class="back-wrap">
          <figure class="chevron">
            <img src="../img/chevron-b.png" />
            <img src="../img/chevron-g.png" />
            <img src="../img/chevron-o.png" />
            <img src="../img/chevron-r.png" />
          </figure>
          <p class="back-text">back</p>
        </div>
      </section>


      <!-- START OF ORIGINAL BODY -->
      <div id="example">

        <!-- NAV/TITLE PANEL -->
        <header>
          <div class="full width">
            <div class="half-width">
              <h1>Jubilee Austen</h1>
            </div>
        <!-- NAV BAR -->
            <div class="half-width" id="nav">
              <nav>
                <ul>
                  <li><a href="#about">About</a></li>
                  <li><a href="#work">Work</a></li>
                  <li><a href="#contact">Contact</a></li>
                </ul>
              </nav>
            </div>
            <!-- <span>Hi,</span> used to change colour of just "Hi," text -->
            <h2><span>Hi,</span> I'm a developer that loves clean & elegant code.</h2>
          </div>
         </header>

         <main>
      <!-- ABOUT PANEL -->
           <section id="about">
             <div class="full-width">
               <h2>A little bit about me.</h2>
               <div class="half-width">
                 <p>I've made my home base in Providence, Rhode Island with my small growing family. My journey into tech started with a degree in journalism. As I started sharing my writing online, I was fascinated with how easily I could get my voice out there. I was hooked and wanted to learn how to build my own site to fit my own specific needs.</p>
               </div>
               <div class="half-width">
                 <p>That curiosity then opened a door that could never be shut. When I learned how to build my first website, I realized I found something that gave me the freedom & versatility I was looking for in my work. Now I've made a full switch to front-end development, where I can use my organization skills and eye for detail to write clean, elegant code.</p>
               </div>
             </div>
           </section>

      <!-- PROCESS PANEL -->
           <section id="work">
             <div class="full-width">
               <div class="third-width">
                 <img src="img/icon-html.png" alt="HTML icon"/>
                 <h3>Hand-Coded HTML</h3>
                 <p>My focus is writing clean, well-formatted, semantic HTML5 by hand to make sure that the content is easy to read, easy to collaborate, trouble-shoot and accessible.</p>
               </div>
               <div class="third-width">
                 <img src="img/icon-css.png" alt="CSS icon"/>
                 <h3>Well-Organized CSS</h3>
                 <p>I pride myself on writing CSS that is easy to read and build on. I focus on keeping my CSS lean and fast to load, and I make it a habit to stay up to date on current best practices.</p>
               </div>
               <div class="third-width">
                 <img src="img/icon-pencil.png" alt="Pencil icon"/>
                 <h3>Easy Converting PSD to HTML</h3>
                 <p>You can trust me to take a designer's PSD and quickly & accurately convert it into a webpage that is pixel-perfect match.</p>
                </div>
              </div>
            </section>

      <!-- CONTACT PANEL -->
            <footer id="contact">
              <div class="full-width">
                <div class="half-width">
                  <img id="contact-img" src="img/contact.png" alt="Person typing at laptop"/>
                </div>
                <div class="half-width" id="contact-info">
                  <h2>Like what you see?</h2>
                  <h3 id="email-header">Let's meet for a cup of coffee.</h3>
                  <a href="mailto:hi@jubileeausten.com"><img id="envelope" src="img/icon-envelope.png" alt="mail icon"/>hi@jubileeausten.com</a>
                  <h4 id="socialmedia-header">Or, find me on the interwebs</h4>
              <!-- ICON LINKS -->
                  <ul>
                    <li><a href="https://twitter.com" target="_blank"><img src="img/icon-twitter.png" alt="Twitter icon"/></a></li>
                    <li><a href="https://tumblr.com" target="_blank"><img src="img/icon-tumblr.png" alt="Tumblr icon"/></a></li>
                    <li><a href="https://www.instagram.com/" target="_blank"><img src="img/icon-instagram.png" alt="Instagram icon"/></a></li>
                    <li><a href="https://www.linkedin.com/" target="_blank"><img src="img/icon-linkedin.png" alt="Linkedin icon"/></a></li>
                    <li><a href="https://github.com/" target="_blank"><img src="img/icon-github.png" alt="GitHub icon"/></a></li>
                  </ul>
                </div>
              </div>
            </footer>
          </main>

          <!-- END OF ORIGINAL HTML -->

        </div>
    </body>
</html>

​

​

/* ===== ROGUE PICKINGS ===== */
 /* =========================================================================
   Author's custom styles
   ========================================================================== */
   @font-face {
     font-family: atelas;
     src :url('../fonts/atelas/atelas.ttf') format('opentype');
   }


   /* -------- PORTFOLIO BANNER & MANAGEMENT -------- */
   .back {
     width: 100%;
     background-color: #1D2120;
     padding: 10px 0;
     position: fixed;
     top: 0px;
   }
   .div-link {
     position:absolute;
     width:100%;
     height:100%;
     top:0;
     left: 0;
     z-index: 1;
     background-image: url('empty.gif');
   }
   .back-wrap {
     width: 90%;
     margin: auto;
   }
   .chevron {
     margin: 0;
   }
   .chevron img {
     width: 35px;
     float: left;
     margin-right: 1.5%;
   }
   .back-text {
     margin: 0 0 0 3%;
     font-family: atelas;
     font-size: 6em;
     color: #e2e2e2;
     text-decoration: none;
     line-height: 0.8;
     display: none;
   }
   #example {
     max-width: 1200px;
     margin: auto;
     clear: both;
     padding-top: 55px;
   }


   /* ======== ORIGINAL ROGUE PICKINGS CSS ======== */
   html {
     font-size:16px;
   }
   body {
     /*max-width: 1200px; --- REMOVED FOR PORTFOLIO BANNER --- */
     margin: 0 auto;
     font-size: 1em;
     font-family: Montserrat, Helvetica, Arial, sans-serif;
   }
   header {
     font-size: 1em;
   }
   .top-section {
     font-size: 1em;
   }
   .bottom-section {
     font-size: 1em;
   }
   footer {
     font-size: 1em;
   }
   header, .top-section, .bottom-section, footer {
     max-width: 90%;
   }
   h1, h3, h4 {
     text-transform: uppercase;
   }
   h1 {
     color: black;
     font-size: 1.875em;
     text-align: center;
     width: auto;
     padding: 2.45% 0;
   }
   h3 {
     color: black;
     font-size: 1.125em;
     text-align: center;
     padding: 15px;
   }
   h4 {
     color: black;
     font-size: 0.75em;
   }
   .main-title h3 {
     text-align: left;
     padding: 5px 0px;
     text-transform: uppercase;
     color:#77a466;
   }


   /*The widths are in a percentage!*/
   header {
     width: 100%;
     height: 10%;
     margin: 0 auto;
   }
   header .heading {
     border-bottom:3px solid #77a466;
     height: auto;
   }
   header span {
     color: #77a466;
   }
   header nav {
     padding: 8% 0px;
     margin:auto;
     }
   header nav a {
     text-decoration: none;
     text-transform: uppercase;
     font-weight: bold;
     font-size: 0.875em;
     padding: 0 10px 20px 10px;
     color:#77a466;
     display: block;
     text-align: center;
     }
     #last-nav {
       padding: 0 10px;
     }

   /*The widths are in a percentage!*/
   .top-section, .bottom-section {
     width: 100%;
     margin: 0 auto;
     clear: both;
   }
   .main-image {
     width: 100%;
     height: auto;
     float: left;
     clear: both;
   }
   .main-image img {
     width: 100%;
     border-bottom:3px solid #77a466;
     border-top: 3px solid #77a466;
   }
   .main-title {
     width: 100%;
     height: auto;
     float: left;
   }
   .main-title p {
     padding: 0px;
     line-height: 156.25%;
     font-size: 1em;
   }
   .section-one, .section-two, .section-three {
     width: 100%;
     height: auto;
     clear: both;
     border-top: 1px solid #eee;
   }
   .section-one h4, .section-two h4, .section-three h4 {
     padding: 10px 30px 10px 0px;
   }
   .menu {
     list-style: none;
     padding: 0px 30px 0px 0px;
   }
   .menu li {
     padding: 10px 0;
     color:#77a466;
   }
   .reviews {
     color: #333;
     line-height: 135%;
     font-size: 1em;
   }
   .address {
     font-size: 1em;
     line-height: 150%;
   }
   .reviews, .address {
     padding: 0px 30px 0px 0px;
   }

   /*The widths are in a percentage!*/
   footer {
     width: 100%;
     height: 50px;
     border-top:3px solid #eee;
     margin: 0 auto;
     clear: both;
     text-align: center;
   }
   footer span {
     font-family: "Wisdom Script", script;
     text-transform: lowercase;
     color: #77a466;
     font-size: 0.875;
   }




   @media all and (min-width: 600px) and (max-width: 939px) {
     header nav {
       padding: 3.75% 0px;
     }
    }


    @media screen and (min-width: 940px) {

      /* -------- PORTFOLIO BANNER CSS -------- */
      .chevron img {
        width: 30px;
      }
      .back-text {
        font-size: 3em;
      }
      #example {
        width: 96%;
        padding: 40px 2% 0 2%;
      }

      /* -------- ORIGINAL CSS -------- */
      body {
        /*width: 96%;   --- REMOVED FOR PORTFOLIO BANNER --- */
        /*padding: 0 2%;   --- REMOVED FOR PORTFOLIO BANNER --- */
      }
      header, .top-section, .bottom-section, footer {
        max-width: 100%;
      }
      header h1 {
        text-align: left;
        float: left;
      }
      header {
        height: 100px;
      }
      header .heading {
        border-bottom: none;
      }
      header nav {
        float: right;
        width: auto;
        padding: 45px 0px;
      }
      header nav a {
        display: inline;
      }
      .section-one, .section-two {
        border-right: 1px solid #eee
      }
      .section-one h4 {
        padding: 10px 0px;
      }
      .section-two h4, .section-three h4 {
        padding: 10px 30px;
      }
      .menu {
        padding: 0px;
      }
      .reviews, .address {
        padding: 0px 30px;
      }
      .section-one, .section-two, .section-three {
        width: 33%;
        height: auto;
        clear: none;
        float: left;
        border-top: 1px solid #eee;
      }
    }
    /* -------- END ORIGINAL CSS -------- */

<!doctype html>
<!-- ROGUE PICKINGS -->
<html>
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title>Rogue Pickings</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/main.css">
    </head>


    <body>

  <!-- PORTFOLIO BANNER -->

      <section class="back">
        <a class="div-link" href="../index.html"><span></span></a>
        <div class="back-wrap">
          <figure class="chevron">
            <img src="../img/chevron-b.png" />
            <img src="../img/chevron-g.png" />
            <img src="../img/chevron-o.png" />
            <img src="../img/chevron-r.png" />
          </figure>
          <p class="back-text">back</p>
        </div>
      </section>



  <!-- START OF ORIGINAL BODY -->
      <div id="example">

        <!-- MODULE: Logo & Nav -->
        <header>
          <div class="heading">
            <h1><span>rogue</span> pickings</h1>
          </div>
          <nav>
            <a href="#about">About</a>
            <a href="#menu">Menu</a>
            <a href="">Locations</a>
            <a href="">Gallery</a>
            <a href="#reviews">Reviews</a>
            <a id="last-nav" href="#contact">Contact</a>
          </nav>
        </header>

        <!-- MODULE: Top Section -->
        <div class="top-section">
          <div class="main-image"><img src="img/download.jpg" />
          </div>
          <div class="main-title" id="about">
            <h3>Welcome to our little corner of the internet!</h3>
            <p>Welcome to Rogue Pickings, the roaming truck bringing you the freshest ingredients and ideas in food. Our team works hard so you can be sure our ingredients are always fresh and picked carefully. Our menu changes every day and is made with you in mind. We can't wait to come to you! Check out our locations to see where you can find us. </p>
          </div>
        </div>

        <!-- MODULE: Bottom Section -->
        <div class="bottom-section">
          <div class="section-one" id="menu"><h4>Today's Specials</h4>
            <ul class="menu">
              <li>Flaming Hummus & Falafel Salad</li>
              <li>Sizzling Bean Burrito</li>
              <li>Green Gloves Tamales</li>
            </ul>
          </div>

          <div class="section-two" id="reviews"><h4>Our Awesome Reviews</h4>
            <p class="reviews">"I got so excited about the yumminess of the falafel salad that I am typing this review as I inhale my lunch. Yes it is that good.... Service was super friendly and quick. Can't wait see you Rogue Pickings again tomorrow!"</p>
          </div>
          <div class="section-three" id=contact><h4>Contact</h4>
            <p class="address">1001 Potrero Avenue<br>
              San Francisco, CA 94110<br>
              (415) 206-8000 </p>
          </div>
        </div>

        <!-- MODULE: Footer -->
        <footer>
          <h4>Powered by lots of <span>fresh</span> ingredients.</h4>
        </footer>

        <!-- END OF ORIGINAL ROGUE PICKINGS HTML -->

      </div>

    </body>
</html>

​

Answer 1

您的横幅没有响应，其高度是固定的(55px)。如果站点以不同的方式显示-不同的视口缩放，您的横幅将看起来更小/更大。

检查这些站点中的viewport meta标记：

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

如果initial-scale不同，或者其中一个页面缺少视口标记，它可以解释其中的差异。

如前所述，缩放会影响显示的宽度，这会影响横幅的视觉大小。如果您希望它具有响应性，则应将高度单位更改为百分比，而不是像素。

编辑

第一个页面比第二个页面宽得多，当您缩小以查看所有页面时，它会改变横幅的视觉高度。

Answer 2

我不记得在iphone上是否存在缩放级别，但它是在桌面浏览器上，你能放大/缩小其中的一个吗？有没有办法确保你处于100%的缩放状态？

编辑

较小的是不是包含在小于55px的一组标签中？因为这会导致它被限制为较小的尺寸。