在移动设备上的完整背景图像，通过拖动视图端口移动整个图像

Question

我有一张地图

的图片

在移动设备上，我希望将其带到该地图的某个特定部分（例如非洲），然后通过捏合来移动整个地图。

我的CSS在这里：

main {
  background-image: url("map.jpg");
  /* Full height */
  height: 100vh; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

然而，在移动设备上我得到了这个：

我无法通过挤压在地图上移动。我怎么能这样做？

您可以通过按住Shift键并单击鼠标来simulate在Chrome上的视口上拖动。

确保您在devtools上的移动视图上进行测试。

Answer 1

您需要在HTML文件的头部使用此元标记： 试试这个：

<meta name="viewport" content="width=device-width, initial-scale=.5, maximum-scale=12.0, minimum-scale=.25, user-scalable=yes"/>

Answer 2

我认为你需要java script来移动背景img

我找到了解决方案。

**感谢@banzomaikaka ** Using Mouse Drag To Control Background Position

演示http://jsfiddle.net/VRvUB/854/