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并注意到你在background-size:100%选择器中使用了html, body，看到这个后我访问了你的live website并且看到你也在那里使用它。

如果您更改background-size:100%选择器中的html, body，则背景图片会正确缩放到移动网站（通过开发人员控制台更改值，在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%;
}

在移动浏览器中不缩放的背景图像

1 个答案: