Question

我已经做了一段时间的响应式设计了，我仍然无法弄清楚为什么我的网站有时会在Android设备上搞砸了。以下是Android（左手机）与iPhone（右手机）的比较：http://i.imgur.com/QfGAhB0.jpg。许多媒体查询根本不起作用 - 除了显示的菜单问题之外，底部的联系表单（未图示）比它应该更宽，导致页面的其余部分更小并且不覆盖整个屏幕。其他一些人也在努力。

我已经在这个主题上阅读了很多stackoverflow答案。

我已经为移动设备使用了以下元标记（我在研究解决此问题时已在网上找到）：

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

我还使用了一些我用窗口调整大小的jQuery函数，如下所示：

$(window).resize(function(){ 
    var nav = $( "nav ul" ); 
    var w = $(window).width();  
    if(w > 700 && nav.is(':hidden')) {  
        nav.show(); 
    }  else if (w < 700) {
        $(".logo img").css("visibility", "hidden");
        $('nav').css("position", "fixed");
        $("#totop").css("display", "none");
    }
});

除了这些之外，据我所知，我所有的@media查询都非常标准。该网站是kstardesigns.com

谢谢！

Answer 1

尝试在css文件中使用更多相对宽度，或根据带有媒体查询的屏幕加载不同的css文件。使用javascript例如：

if (window.matchMedia("(orientation: portrait)").matches)

要了解您是否正在通话，然后使用jquery进行一些编辑。

但我认为最好的方法是尽可能在css中完成所有操作并避免这样的解决方法。

Meta标签无法帮助Android上的响应式设计

1 个答案: