一些智能手机会选取桌面媒体查询

Question

我们最近开发了一个网站，基本上有两种模式，移动模式和平板电脑+台式机模式。css 文件首先使用移动规则进行布局，然后对于 640px 以上的任何尺寸都有一个断点，因此我们可以在陆地空间上向 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>

Answer 1

从我搜索的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

Answer 2

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

一些 android 版本有一个错误，即页面加载时视口无法正确报告，我为 Galaxy 800、2 和 3 (!!( 报告了 3 像素的视口大小。通过在实际检查视口宽度之前添加 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>