2

我们最近开发了一个网站，它基本上有两种模式，移动模式和平板电脑 + 桌面模式。该 css 文件首先按照移动规则进行布局，然后对于 640 像素以上的任何尺寸都有一个断点，因此我们可以在陆地空间向 7 英寸平板电脑显示桌面版本。

然而，虽然它适用于所有 iphone、我的 Galaxy s4，甚至 windows phone，当然还有 ipad 和桌面，但有些手机采用桌面风格，基本上显示桌面版本，即 Galaxy s2 和 Galaxy s3 等等。

正如我所说，我的css代码是首先构建移动端的，所以所有宽度小于640px（几乎所有）的移动端都不应该选择桌面样式，媒体查询如下：

@media all and (min-width: 641px) { .... }

所以我真的不明白为什么..有什么想法吗？

编辑：我忘了添加我们已经添加了一个条件，它将检查设备的大小是否大于 640，在这种情况下，它将视口大小设置为网站的全宽，以便在平板电脑上缩小，否则它只需将其设置为设备宽度。

<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
if (screen.width > 640) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=1000');
}
</script>
4

2 回答 2

0

根据我搜索 Galaxy S3 媒体查询的内容：

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
  .your-css{}
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
  .your-css{}
}

看起来这就是它实际寻找的东西......您可以尝试通过更改视口来缩放它：

<meta name="viewport" content="width=device-width">

此外，您可以添加 jquery 来更改大小.... Jquery：

 // Check for device screen size
 if($.mobile.media("screen and (max-device-width: 640px)")) {
  // Change viewport for smaller devices
 $('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}

还：

您可以在 s3 中打开它，以便获得 Galaxy 媒体查询的准确性：

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

于 2013-09-25T13:29:37.703 回答
0

感谢您的输入，我发现了问题。

一些 android 版本有一个错误，即在页面加载时视口无法正确报告，我得到了 Galaxy 1、2 和 3 报告的 800px 视口大小（！！！）。通过在实际检查视口宽度之前添加 200 毫秒的超时来解决该问题，似乎这个小延迟足以让设备报告正确的大小。它创建了一个小的时间窗口（200 毫秒），其中桌面版本的缩放是可见的，但至少它解决了这个问题。

任何登陆这里有同样问题的人的解决方案：

<meta id="testViewport" name="viewport" content="width=device-width, maximum-scale=1">
<script>
    setTimeout(function(){
        if (document.documentElement.clientWidth > 640) {
            var mvp = document.getElementById('testViewport');
            mvp.setAttribute('content','width=1000');
        }
    }, 200);
</script>
于 2013-09-26T12:44:47.117 回答