3

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

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

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

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

我在测试这个网站时得到的是应该首先出现的响应式视图，但很快它就会不断扩展。就好像浏览器决定永远，不断地放大。我试图指出可能导致该问题的位置，它应该捕捉到最大设备宽度，或者我可以以某种方式一次性定位 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 手机上并让我知道他们的想法，我们将不胜感激

4

3 回答 3

0

好吧，再看看这一切，我已经调整了我的 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;}
于 2013-02-28T01:11:23.243 回答
0

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

尝试这个。

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

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

于 2013-02-27T19:36:37.677 回答
0

几个小时后，我试图弄清楚为什么，我意识到这正是 Android 在 CSS 中获取它所需要的：

@media screen

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

@media all

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

于 2013-02-27T23:31:39.833 回答