Question

我们最近开发了一个网站，主要有2种模式，移动和平板电脑+桌面模式。 css文件首先使用移动规则进行布局，然后对于640px以上的任何大小都有断点，因此我们可以在登陆域时将桌面版本显示为7“平板电脑。

然而，尽管它适用于所有iphone，我的Galaxy s4，甚至是Windows手机，当然还有ipad和台式机，一些手机拿起桌面样式，基本上显示桌面版本，即galaxy s2和银河系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 1,2和3报道的800px视口大小（!!!）。通过在实际检查视口宽度之前添加200ms的超时来解决该问题，似乎这个小延迟足以让设备报告正确的大小。它创建了一个小的时间窗口（200ms），可以看到桌面版本的缩放，但至少它解决了这个问题。

任何登陆此处的人都有同样问题的解决方案：

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

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

2 个答案: