移动端CSS缩放问题求助：首次搭建的猫咪网站显示异常

首先你的meta viewport标签语法错误，这就是它没起作用的核心原因——你重复写了content属性，引号嵌套也混乱了。

你现在的错误标签：

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

替换成标准的正确写法：

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

解决完viewport的问题，再给你几个新手友好的移动端适配小技巧：

• 别给容器写固定的width: 1200px这类硬数值，改用max-width: 100%或者百分比宽度，让元素能自适应屏幕宽度
• 字体和间距尽量用rem或者em代替px，方便整体缩放适配不同设备
• 如果某些元素在小屏幕上挤在一起，用媒体查询针对性调整：

  @media (max-width: 768px) {
    /* 这里写手机端专属样式，比如调整字体大小、隐藏非必要元素、改变布局方向 */
    .cat-photo-container {
      flex-direction: column;
    }
  }
  

• 检查有没有元素设置了overflow: hidden导致内容被截断，或者white-space: nowrap强制不换行撑破容器

内容的提问来源于stack exchange，提问作者Edgar Saucedo