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

Question

所以我现在很难过。我正在使用主题Delicate构建一个响应式网站。它带有元标记

我在印象中将在屏幕宽度上设置整个内容。在我的手机上，我必须缩小以显示内容。我已经尝试将初始比例值更改为0.65，这使我的个人手机上的网站看起来不错，我正在使用它开发，但它在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%;
  }
}

确保您要么更改主题＆＃39;默认宽度或由于css特异性而在宽度上附加!important。

Answer 2

initial-scale = 1似乎打破了比修复更多的东西。我只是用：

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

这给了我希望的宽度匹配。桌面浏览器很好，Chrome上的Android现在在两个方向都很完美，就像Kindle上的Silk一样。 没有在IOS上测试过（这是新的IE6，恕我直言），但如果我需要的话，我会在黑客攻击中解决这个问题。