一些智能手机拿起桌面媒体查询？答案

【问题标题】：some smartphones pick up the desktop media queries?一些智能手机拿起桌面媒体查询？
【发布时间】：2013-09-26 20:44:47
【问题描述】：

我们最近开发了一个网站，它基本上有 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>

【问题讨论】：

标签： android css mobile responsive-design media-queries

【解决方案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

【讨论】：

您好，感谢您的回复。但这不是问题，因为移动设备会报告移动视口大小，而 S3 实际上是 360x640。

【解决方案2】：

感谢您的意见，我找到了问题。

一些 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>

【讨论】：