javascript - 网站在 Galaxy S5 浏览器上没有响应

标签 javascript jquery responsive-design

我正在使用 jquery 删除 div,以使我的主屏幕在小屏幕上看起来有所不同,并且它在 Macbook Air 和 Iphone X 上运行良好。但是在 Android 上,div 并未按预期删除和替换。这是网站草稿的地址:

http://projetocc.learningtodom.com/

这是 jquery 位的代码:

<script>
 $(function(){
    if (window.matchMedia("(max-width: 750px)").matches) {
        $('.desktop').remove();
    }
});

$(function(){
    if (window.matchMedia("(min-width: 750px)").matches) {
        $('.mobiles').remove();
    }
});
  </script>

如果您还需要我发布一些 css 代码,请告诉我。

最佳答案

如果您的 JavaScript 方法没有取得任何成功,也许您可​​以考虑使用 CSS 和媒体查询。您可能会发现它更容易并且给出更一致的结果。

只需在文档的头部添加一个视口(viewport)元标记

<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>  

然后在 CSS 中添加以下内容

    @media(max-width:750px){
    .desktop{
        display:none;
    }
   }

   @media(min-width:751px){
     .mobiles{
         display:none;
     }
   }  

我对您的一个断点做了一个小小的更改。使用您发布的代码,移动设备和桌面 div 都将隐藏在 750 像素处。

希望这会有所帮助!

关于javascript - 网站在 Galaxy S5 浏览器上没有响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59242139/

相关文章:

javascript - tokeninput jquery 插件 - preventDuplicates 不工作

html - 网站样式在错误的视口(viewport)宽度下发生变化

javascript - 为什么 "reject"在此代码中实际上并未拒绝?

javascript - Express.js :how to use different middlewares based on NODE_ENV?

具有 2 个条件的 Jquery 选择器

jquery - $elem.hasClass 不是函数

javascript - 没有行号? TypeError {}(匿名函数)

javascript - 关闭原型(prototype)?

javascript - JS 在 CSS 之前启动

html - 只有在 div 旁边时才有边距顶部