调整浏览器和移动设备大小时，网站无法正确缩放 phone

Question

当我尝试调整网站大小或在 phone 上查看时，我的网站无法正确缩放。我添加了以下 META 标签，但它不起作用。请指教，谢谢。

http://patricesprojects.info/atlanta/index.html

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


   <link rel="stylesheet" href="atlanta.css">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Pacifico">
   <link rel="stylesheet"href="https://fonts.googleapis.com/css?family=Roboto">
 </head>
<body>
  <header id="header">
   <div id="logo">
      <img src="logohtml.png" alt="logo" id="header-img">
   <span>Welcome to Atlanta!</span>
   </div>

  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#"><b>Things to Do</b></a></li>
      <li><a class="nav-link" href="#"><b>Where to Eat</b></a></li>
      <li><a class="nav-link" href="#"><b>Events</b></a></li>
      <li><a class="nav-link" href="#"><b>Hotels</b></a></li>
      <li><a class="nav-link" href="#"><b>Parking</b></a></li>
     </ul>
  </nav>
</header>
</header>

编辑

如果需要 CSS 代码，请告知，再次感谢。

编辑这是网站更新后的样子。第一张图片是更新前的样子。 enter image description here enter image description here

Answer 1

您在整个页面中使用大尺寸，例如 img 元素设置为 width: 40em，或 #about-us 使用 padding: 20em。

em 单元的默认大小为 16px，因此这些元素被设置为至少 640px 宽，这会拉伸您的页面以适应呈现更小的设备比那个。

如果您希望您的网站能够缩小规模，请尽可能避免使用较大的硬编码尺寸。例如，对于图像，您可以像这样使用更灵活的东西：

img {
  max-width: 40em;
  width: 100%;
}

Answer 2

不确定在这里使用 position: absolute; 的原因是什么。一般来说，这样做不是一个好的做法（至少在那种情况下）。您可以使用 flex 定位所有元素。此外，为导致大部分问题的徽标提供 width: 40rem;，因为它试图在每个屏幕尺寸上保持其宽度。

所以，对于徽标，您可以做类似的事情 -

#header-img {
max-width: 220px;
width: 100%;

并清除所有定位并仅使用 flex -

    header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    background-color: #ffaa63;
    color: white;
    font-family: 'Pacifico', serif;
    padding: 1.5em;
    max-width: 100%;
    box-shadow: 0px 10px 20px grey;
    height: auto;
}
#logo span {
     /* position: relative; */
    /* left: 150px; */
    text-shadow: 2px 2px 4px #000000;
}
#nav-bar ul {

    /* position: relative; */
    /* right: 75px; */
    list-style-type: none;
}
#nav-bar ul li {
    /* float: left; */
    margin: 0px 15px;
    color: #fff;
    text-shadow: 2px 2px 4px #f2f2f2;
}

Answer 3

这些是我的笔记和您可以用来改进网站的建议。

css 代码有很多不正确的语法
header 图片包含不当。删除填充并将 height: 70vh; 添加到 #about-us
添加例如 padding: 0px 20px 到 h1 以在标题两侧添加一些白色 space
删除 ul 中的所有填充，方法是将其设置为 0 以删除默认包含的额外左侧 space。
给页脚 text-align: center; 以使其内容居中。

此外，所有 <img> 都在小 devices/widths 上溢出，可以通过添加以下样式来包含和响应它。

img{
    width: 100%;
    height: 50vh;
    object-fit: cover;
}

对于导航栏

首先应裁剪您的徽标图像以移除其周围的所有空白 space。这将使您可以增加其大小，而不会对导航高度产生重大影响，并且无需使用 position: absolute。注意下面两张图片的区别：

你应该使用媒体查询使其响应基于一些断点的设备。阅读以下有关它们的链接

这是您的导航栏的一个工作示例 https://codepen.io/DohaHelmy/pen/xxbzzRN

它使用 mobile-first approach and it. Try to understand how it is made if you need to make it Desktop first. In addition Read this guide on flexbox 来了解如何使用示例中使用的 flex 对齐和对齐内容。

调整浏览器和移动设备大小时，网站无法正确缩放 phone

Website not scaling correctly when resizing browser & mobile phone

html

css

meta

这些是我的笔记和您可以用来改进网站的建议。

对于导航栏