mobile - 初始比例 = 1.0 + 宽度 = 设备宽度不适合任何移动设备上的整个屏幕

Question

所以我现在很困惑。我正在使用 Delicate 主题构建一个响应式网站。它内置了元标记

我的印象是将整个内容设置在屏幕宽度上。在我的手机上，我必须缩小才能使内容显示得很好。我尝试将初始比例值更改为 0.65，这使得该网站在我用来开发的个人手机上看起来不错，但在 iphone 6 或其他设备上效果不佳。

我一直在把脸撞在墙上，所以任何建议都将不胜感激

score 0 · Accepted Answer

问题是具有固定宽度的主容器，而不是基于屏幕的自适应宽度。我的猜测是主题是废话！

这是一个修复：

*,
*:before,
*:after {
  margin: 0pt; 
  padding: 0pt;
  box-sizing: border-box;
}

.content-pad {
  width: 100%;
}

更具体地说，您必须将此规则仅应用于小型设备，例如：

/* Apply this width only to small devices */

@media only screen and (min-width: 320px) {
  .content-pad {
    width: 100%;
  }
}

!important由于 css 的特殊性，请确保您更改主题的默认宽度或附加宽度。

score 0 · Accepted Answer

initial-scale=1 似乎比它修复的更多。我只是使用：

<meta name='viewport' content='width=device-width'>

这给了我希望的宽度匹配。桌面浏览器很好，Chrome 上的 Android 现在在两个方向上都很完美，Kindle 上的 Silk 也是如此。尚未在 IOS（这是新的 IE6，恕我直言）上进行测试，但如果需要，我将针对该问题进行特定的修复。

2 回答 2