Mobile 响应式设计在某些（移动）浏览器中无法工作

我一直在试验我的第一个反应灵敏的设计，但我遇到了一个小麻烦

当在我的常规浏览器上调整屏幕大小时，它看起来很好（一个小，一个大）：

---

然而，当我在手机上查看它时，它似乎失败了我试图实现的目标

它似乎可以在我的HTC浏览器上运行，但在默认的Android浏览器上不起作用。 它在iPhone4S上也失败了，在Safari和Chrome上都失败了

我正在使用

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

你知道我哪里出错了吗

演示站点：

编辑：移动浏览器上布局的屏幕截图（视图不正确）：

问候,，

---

Dave

“我想达到的目标似乎失败了”-你想达到的目标是什么？当我缩小页面宽度时，按照正常浏览器上的布局。到目前为止，它在一些移动浏览器上给了我一个混乱的布局，也没有显示背景图像…添加了移动浏览器上混乱布局的屏幕截图：对不起，但请帮助我理解：

@媒体屏幕和（最小宽度：1px）

为什么只适用于移动浏览器？CSS中非媒体查询之前驻留的媒体查询（例如，请参阅#包装器和.container代码）不会产生任何效果，因为它们无论如何都会被覆盖。。。始终将媒体查询放在最后是一条好规则，“@media screen and（min-width:1px）”不一定只适用于移动浏览器，它只是测试最小的屏幕。我的媒体查询在我的CSS文件的末尾，这是不正确的使用吗？我确实理解一些媒体查询可能会在这之前覆盖我的“默认”CSS代码，但这还不是我关心的问题。你可以想象“max 1300”将是一个媒体查询“1100 1300”边距或更远的道路上的w/e。目前，我只是想有两个版本的工作，目前在1300px中断。

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">