android - 响应式网站 - 只有 Android 会在加载时立即开始连续放大

Question

我没有发现任何类似的问题搜索问题。

网站:http://davidbrownhydraulics.com (旧设计，不是我的)

适用于:iPhone 4/5/iPad/等

不适用于:Android 手机... Galaxy S2 和其他 Galaxy 手机。 (需要在 Android 手机上实际加载它，看看它是如何工作的)

我在测试这个网站时得到的是应该首先出现的响应式 View ，但它很快就会不断扩展。就好像浏览器决定永远不断地放大一样。我试图找出可能导致该问题的位置，它应该捕捉到最大设备宽度，或者我可以以某种方式一次性定位 Android 手机？

任何人有任何想法可以让我尝试吗？我已经尝试了很多不同的 META 内容类型的东西，改变了断点(我有一种感觉它可能不适用于 galaxy s2？或者android 具有不同的像素比例)无济于事。

以下是编码的相关部分:

头元:

<meta http-equiv="Content-Type" name="viewport" content="charset=UTF-8, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

媒体查询:

@media screen and (max-device-width:767px) 

我的 CSS:(我认为它会捕捉到最大设备宽度)

html { width:100%; overflow-x:hidden; }
body { width:100%; overflow-x:hidden; }
#outer { width:100%; }
#main { width:100%; }
#header { width:100%; max-width:100%; overflow:hidden; }

提前致谢，如果有人愿意在他们的 Android 手机上加载它并让我知道他们的想法，我将不胜感激

Answer 1

设置视口(viewport)告诉浏览器内容应该如何适应设备的屏幕，并通知浏览器该站点针对移动设备(Android、Windows、iOS)进行了优化。告诉浏览器将视口(viewport)设置为设备的宽度初始比例为 1。

试试这个。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

这将在所有视口(viewport)上完美运行。