initial-scale = 1.0 + width= device-width 不适合任何移动设备的整个屏幕

Question

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

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

我一直在用脸撞墙所以非常感谢任何建议

Answer 1

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

这是一个解决方法：

*,
*: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 特殊性。

Answer 2

initial-scale=1 似乎破坏多于修复。我只是使用：

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

这让我 hoped-for 匹配到宽度。桌面浏览器很好，Chrome 上的 Android 现在在两个方向上都是完美的，就像 Kindle 上的 Silk 一样。尚未在 IOS（这是新的 IE6，恕我直言）上进行测试，但如果需要，我会针对该问题进行特定修复。

initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile