响应式网站 - 只有 Android 立即开始在加载时持续放大答案

【问题标题】：Responsive web-site - Only Android immediately starts to Continuous Zooming In On Load响应式网站 - 只有 Android 立即开始在加载时持续放大
【发布时间】：2013-02-28 09:11:23
【问题描述】：

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

网站：http://davidbrownhydraulics.com（旧设计，不是我的）

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

不适用于：Android 手机... Galaxy S2 和其他 Galaxy 手机。（需要在安卓手机上实际加载，看看效果如何）

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

任何人有什么想法可以尝试吗？我已经尝试了很多不同的 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 手机上并让我知道他们的想法，我们将不胜感激

【问题讨论】：

标签： android html responsive-design media-queries

【解决方案1】：

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

试试这个。

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

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

【讨论】：

几个小时后，我试图找出原因，我意识到这正是 Android 需要在 CSS 中选择它：“媒体屏幕”不会选择视点。我将其更改为“媒体全部”并且它起作用了。

【解决方案2】：

在试图找出原因的几个小时后，我意识到 Android 需要在 CSS 中选择它：

@media screen

不会拾取视点。我把它改成

@media all

并且工作正常 :) 啊！简单的事情......

【讨论】：

【解决方案3】：

好吧，再看看这一切，我已经调整了我的 CSS 媒体查询（如果需要，请参阅源代码），但这个主要的编码部分有所帮助。看起来尝试为所有内容设置 100% 的宽度会导致某些东西爆炸，导致 android 变得更奇怪。

将它放在我的 css 断点下（并根据您自己的需要对其进行修改，如果这对某人有帮助的话）已经帮助并保持网站现在可浏览。一个很好的快速修复。

html { width:100%; overflow-x:hidden; max-width:480px !important; }
body { width:100%; overflow-x:hidden; max-width:480px!important; }
img { max-width:480px !important;}

【讨论】：