html - 背景图片在移动浏览器中不缩放

Question

我已经尝试了很多东西...我无法让网站扩展到移动浏览器。

body{
  background: url("Photo-Carpentry-Tools-Wood-Planks-Collage-21.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100% 100%;
  margin: 0;
  background-attachment: fixed;
  max-width: 100%;
}

另外我试过

  <meta name="viewport" content="user-scalable = yes">

以及上述代码的一些其他变体。

该网站现在实际上已经上线了 - 它是 www.readyshift.net - 在 Chrome 中运行良好，在移动设备上无法运行。

Answer 1

我看过你的 fiddle并注意到您在 html, body 选择器上使用了 background-size:100% ，在看到这个之后我访问了您的 live website并看到您也在那里使用它。

如果您更改 html, body 选择器中的 background-size:100%，背景图像会正确缩放到移动网站(在您的 live website 上测试过通过开发人员控制台更改值)。

TL:DR 你想将 html, body 更改为:

html,body { 
    background: url("http://www.readyshift.net/css/Photo-Carpentry-Tools-Wood-Planks-Collage-21.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    margin: 0;
    background-attachment: fixed;
    max-width: 100%;
}